Ce tutoriel vous aidera à afficher une page dans le navigateur web intégré du lecteur vidéo.
Liste de courses
Pour mener à bien ce tutoriel vous aurez besoin de :
- un lecteur vidéo ID-AL VP320, VP330 ou EVP380,
- un support de stockage externe (clé USB ou carte microSD),
- un ordinateur.
Préparation du support de stockage
- Branchez le support de stockage sur votre ordinateur ;
- Si nécessaire, formatez le support avec le système de fichier FAT32 ;
- À la racine du support, créez un dossier
www
.
Le dossier www
est le dossier ou tous les fichiers relatifs aux pages HTML doivent être stockés.
Document HTML
Créez un fichier nommé tutorial-quickstart.html
dans le dossier www
.
Son contenu sera plutôt simple puisqu'il permettra seulement d'afficher à l'écran le message "Hello world!".
<html>
<head>
</head>
<body>
<h1 style="color: yellow;">Hello world!</h1>
</body>
</html>
Notez que les pages web peuvent être affichées parallèlement à la lecture de la vidéo. Par conséquent,
vous pouvez créer votre propre interface utilisateur au dessus de la vidéo. Tout ce dont vous avez besoin est d'utiliser une
couleur transparente sur le <body>
de la page (le fond du page est transparent par défaut).
Configuration des sites web
Maintenant, dans le dossier www
, créez un fichier nommé web-config.json
avec le contenu suivant :
{
"websites": [
{
"id": 1,
"url": "http://localhost/www/tutorial-quickstart.html"
}
]
}
Le site web identifié par l'id 1 pointera sur la page HTML que nous venons juste de créer.
Notez que l'URL du site commence par http://localhost/www/
, ce qui indique au lecteur vidéo que la page est située sur son propre serveur web dans le dossier www
.
Pour plus d'information sur la syntaxe de ce fichier, veuillez vous référer au tutoriel Configuration des sites web.
Dossiers multimédia
Maintenant que le contenu HTML est prêt, nous pouvons créer les dossiers multimédia à la racine du support de stockage.
Leurs noms doivent débuter par un nombre entre 0 et 999 et peuvent contenir des balises permettant de définir des comportements spécifiques.
Le dossier débutant par le nombre 0 est le dossier de lecture automatique (si configuration contraire non effectuée).
Suivez ces étapes:
- Créez à la racine un dossier portant ce nom :
000 [WEBS 1][LOOP] My first page
; - Copiez un ou plusieurs fichiers vidéo dans ce dossier (fichiers mp4 ou mkv contenant du H.264 ou H.265).
Le dossier que l'on vient de créer sera lu automatiquement au démarrage puisque son numéro de dossier est 0.
Il contient deux balises :
[WEBS 1]
pour démarrer le navigateur web sur le site ayant l'id 1 (souvenez vous du contenu deweb-config.json
).[LOOP]
pour jouer le contenu vidéo en boucle
Exécution sur le lecteur vidéo
- Ejectez proprement le support de stockage de votre ordinateur ;
- Allumez le lecteur vidéo si ce n'est déjà fait ;
- Branchez le support de stockage dans le lecteur vidéo.
Vous devriez voir la vidéo surmontée du message "Hello word!" en surimpression jaune.