Quick start

Quick start

This tutorial will help you display your first page within the video player browser.

Shopping list

To complete this tutorial, you will need:

  • an ID-AL VP320, VP330 or EVP380 video player
  • an external storage device (USB stick or a microSD card)
  • a personal computer

Media preparation

  1. Plug the external storage device to your computer
  2. If needed, format the storage device using the FAT32 filesystem.
  3. At the root of the storage, create a www folder.

The www folder is the place where all the HTML related files have be stored.

HTML document

In the www folder, create a file named tutorial-quickstart.html.
For now, the content will be quite simple and will just display "Hello world!"

<html>
<head>
</head>
<body>
<h1 style="color: yellow;">Hello world!</h1>
</body>
</html>

Note that the web pages can be displayed while the video is playing, therefore, you can create your own user interface on top of the video. All you need is to use a transparent color on the page <body> (the body background is transparent by default).

Websites configuration

Now, in the www folder, create a file named web-config.json containing the websites definitions.

{
    "websites": [
        {
            "id": 1,
            "url": "http://localhost/www/tutorial-quickstart.html"
        }
    ]
}

Here the website identified by the id 1 links to the HTML page we just created.
Note that the website URL is starting with http://localhost/www/, telling the video player that the page is located on its own embedded web server and located in the www folder.

For more information about the file syntax you can read Websites configuration tutorial.

Multimedia folders

Now that the HTML content is ready, we can work on the multimedia folders which must be created at the root of the storage device.
Their names must be starting with a number between 0 and 999 and can contain tags defining specific behaviors.
The folder starting with the number 0 is the folder that gets automatically played (if not explicitly configured otherwise).

Follow this steps:

  1. At the root, create a folder with the following name: 000 [WEBS 1][LOOP] My first page.
  2. Copy one or more video files into the folder (any mp4 or mkv file with H.264 or H.265 content).

The created folder will start automatically when used on the video player, as it is the folder number 0.
It contains two tags:

  • [WEBS 1] to start the web browser on the website having the id 1 (remember the content of web-config.json).
  • [LOOP] to play in loop the video files it contains.

Running on the video player

  1. Safely eject the storage device from your computer.
  2. Power on the video player if not already done.
  3. Plug the storage device into the video player.

You should see the video running and a yellow "Hello world!" message.