Comment ajouter une piste VTT à une vidéo HTML5

Une piste absente du lecteur et une réplique décalée ne se corrigent pas de la même façon. Commencez par un passage dont vous connaissez les temps.

Relier la piste au lecteur

Placez la vidéo et le VTT encodé en UTF-8 sur le même site. Insérez track dans video. Le chemin est relatif à la page ; srclang indique la langue du texte, pas forcément celle du son. Donnez à chaque piste un libellé distinct.

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

Tester une seule piste sur un serveur web

Téléchargez la vidéo de démonstration et le fichier VTT. Placez-les à côté de la page HTML sur un serveur de test, sous les noms lesson.mp4 et example-en.vtt utilisés dans le code. Ouvrez l’adresse web pour éviter les restrictions propres aux fichiers locaux.

L’extrait ne sous-titre que l’annonce de l’atelier. Il est normal que les premières paroles ne soient pas affichées. À 8 secondes, comparez le texte à l’exemple. À 13 secondes, il doit avoir disparu. S’il reste visible après désactivation, cherchez une autre piste ou du texte incrusté.

Suivre la requête quand le menu reste vide

Ouvrez l’onglet Réseau, rechargez la page et choisissez la piste anglaise. Cherchez la requête .vtt. En son absence, inspectez la balise video publiée : l’éditeur a pu retirer track lors de l’enregistrement. Sinon, comparez l’adresse demandée au dossier de dépôt, en tenant compte des sous-dossiers du cours.

Lisez la réponse même si le statut est 200. Elle doit commencer par WEBVTT, une ligne vide puis le minutage. Une page de connexion renvoie du HTML. En cas d’erreur d’origine croisée, testez le même fichier sur l’origine de la page avant de vérifier l’origine autorisée et le réglage crossorigin.

Retrouver la coupe à partir du décalage

Repérez trois phrases à l’oreille et comparez leur début au minutage des sous-titres. Un écart identique suggère un générique ajouté. Si seule la troisième phrase est décalée, cherchez une coupe après la deuxième. Si l’écart augmente, vérifiez d’abord le montage réellement diffusé.

Sur la page publiée, sélectionnez chaque langue puis désactivez la piste. Si du texte reste à l’image, comparez-la à l’enregistrement original. Transmettez le nom du fichier vidéo, la piste choisie et le temps de lecture précis pour permettre de reproduire le problème.

Exemple du parcours

Voix de synthèse anglaise sur un texte original d’EasySub. L’exemple reprend le troisième segment du SRT ; il ne s’agit ni d’un nouvel export ni d’une révision humaine professionnelle.

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

WebVTT · EN · Télécharger la vidéo de démonstration · SRT original (anglais)

Vérifier la lecture

Sélectionnez English et allez à la huitième seconde. À la treizième, la phrase doit avoir disparu. Ouvrez l’adresse du VTT : une réponse 200 contenant un formulaire de connexion n’est pas un fichier de sous-titres. Vérifiez text/vtt et, en cas de domaine différent, les réglages crossorigin et CORS.