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
- Plug the external storage device to your computer
- If needed, format the storage device using the FAT32 filesystem.
- 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:
- At the root, create a folder with the following name:
000 [WEBS 1][LOOP] My first page
. - 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 ofweb-config.json
).[LOOP]
to play in loop the video files it contains.
Running on the video player
- Safely eject the storage device from your computer.
- Power on the video player if not already done.
- Plug the storage device into the video player.
You should see the video running and a yellow "Hello world!" message.