Fichier .vtt
Bonjour,
J'essaie vainement (depuis 4 bonnes heures) d'intégrer un fichier de sous-titres .vtt dans une page .html (via la balise <video>, œuf corse). Et ça ne marche pas. J'ai tout vérifié au moins 10 000 fois : tout est correct, le .vtt est bon, je l'ai validé avec des testeurs en ligne, la syntaxe .html est impec (vérifiée avec le validateur du W3C).
Voici le code html :
<video poster="../images/videos/films/aborddumiramar.webp" controls preload="metadata">
<source src="../videos/films/aborddumiramar.mp4" type="video/mp4">
<track src="../sous-titres/aborddumiramar.vtt" kind="subtitles" srclang="fr-FR" label="Français">
<p class="erreur_video">Erreur : le lecteur vidéo nécessite un navigateur compatible avec HTML5.</p>
</video>
Dans Vivaldi (moteur Chrome), le lecteur vidéo affiche « Sous-titres : désactivé ».
Avec d'autres brouteurs (Opera, Edge), c'est la même chose.
Avec le Renard roux c'est un peu mieux, j'ai bien « Sous-titres : Français » qui s'affiche mais dans tous les cas, les sous-titres brillent par leur absence.
Si vous avez une idée...
Si vous avez une idée...
Windows / Chrome 144.0.0.0
2 réponses
-
Bonjour,Pour voir d'éventuelles erreurs durant l'affichage de ta page html:
Firefox ou Chrome : click droit sur la page, selectionner Inspecter puis Console
Activer les Erreurs.Si tu ouvres ta page en local, tu dois avoir ce type d'erreur:
Erreur de sécurité : le contenu situé à file:///C:/etc...html ne peut pas charger de données à partir de file:///C:/etc...vtt.Les versions actuelles de tous les navigateurs Firefox Chrome ... ont toutes ce verrou de sécurité.
Pour tester mes fichiers html en local j'utilise servez
A simple web server for local web development.
https://greggman.github.io/servez/
-
Re.
Je reviens sur le sujet après quelques mois.
Il faut en effet ouvrir la page via un serveur local (EasyPHP par exemple) et ça fonctionne, je peux avoir les sous-titres.
Mais voici un autre souci depuis peu : c'est Chrome qui m..., il n'applique plus les styles aux fichiers .vtt sauf pour les éléments qui sont dans une classe, par exemple : video::cue(c.exemple). Pour les styles avec juste video::cue, ça ne marche plus. Résultat, toute la mise en forme est absente sauf pour les lignes de texte marquées d'une classe :
00:15.920 --> 00:17.340
— Exemple N°1 (pas de mise en forme)00:15.920 --> 00:17.340
— <c.exemple>Exemple n°2 (mise en forme liée à la classe « exemple »)</c>J'espère que ce n'est qu'un bogue et pas une de leurs f... mesures de sécurité.
À noter que ça fonctionne toujours avec le Renard roux.
