Qu’est‑ce que WebVTT ?

WebVTT (Web Video Text Tracks Format) est un format de sous‑titres basé sur du texte utilisé pour ajouter des pistes de texte synchronisé aux vidéos. C’est le format officiel pris en charge par HTML5 via l’élément <track>, vous permettant d’ajouter :

• Sous‑titres (traduction de la parole)
• Légendes (parole et effets sonores)
• Descriptions (informations visuelles pour les lecteurs d’écran)
• Chapitres (points navigables dans la vidéo)
• Métadonnées

Structure de base de WebVTT

• Un fichier WebVTT se compose de :
  • Un en‑tête optionnel (WEBVTT).
  • Des métadonnées optionnelles (commentaires ou blocs style/script).
  • Des repères (segments de texte avec minutage et contenu).

1. Format du repère

Un repère a la structure suivante :

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [paramètres du repère]
Contenu du texte...

• Minutage : heures, minutes, secondes et millisecondes au format HH:MM:SS.mmm.
• Paramètres (optionnels) :
  • vertical (lr/rl pour texte vertical)
  • line (position)
  • position (alignement horizontal)
  • size (largeur/pourcentage)
  • align (start/middle/end)

2. Contenu du repère

• Peut être du texte brut ou inclure du balisage :
  • Balises : <b>, <i>, <u>, <ruby>, <lang>, etc.
  • Horodatages (<00:00:05.000>) pour du texte de type karaoké.

3. Style et CSS

• Le style peut être appliqué via :
  • Repères en ligne (en utilisant des balises).
  • Pseudo‑éléments CSS (::cue, ::cue-region) dans le HTML.

4. Pistes de métadonnées

• WebVTT peut contenir des métadonnées (JSON, etc.) pour des applications interactives.

5. Encodage du fichier

• Doit être encodé en UTF‑8.
• Les lignes se terminent par \r\n, \n ou \r.

6. Règles de traitement

• Les analyseurs doivent gérer les fichiers mal formés de façon souple.
• Le BOM (Byte Order Mark) est optionnel.

7. Intégration HTML5

• Utilisé avec l’élément <track> :

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>

• kind peut être subtitles, captions, descriptions, chapters ou metadata.

8. Prise en charge par les navigateurs

• Largement supporté dans les navigateurs modernes (Chrome, Firefox, Safari, Edge).

9. Cas d’utilisation

• Sous‑titres/Légendes pour l’accessibilité.
• Paroles de karaoké avec texte synchronisé.
• Navigation par chapitres dans les vidéos.
• Métadonnées pour les applications vidéo interactives.

Exemple de fichier WebVTT :

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

Les moteurs de recherche ne peuvent pas « regarder » votre vidéo—mais ils peuvent lire le contenu textuel. En utilisant des fichiers WebVTT, vous ajoutez du texte indexable qui :

• Améliore la découvrabilité : Google peut indexer les légendes et les transcriptions, ce qui fait apparaître vos vidéos dans davantage de résultats de recherche.
• Augmente l’engagement : les vidéos sous‑titrées retiennent les utilisateurs plus longtemps—ce qui augmente la durée des sessions et réduit le taux de rebond.
• Renforce l’accessibilité : le sous‑titrage est essentiel pour les personnes sourdes ou malentendantes, et il est favorisé par les algorithmes de classement SEO.

Lorsqu’un fichier WebVTT est associé à une vidéo sur une page Web, Google peut analyser et comprendre ce texte synchronisé, rendant le contenu plus pertinent pour certaines requêtes.

Comment ajouter WebVTT à une vidéo HTML5

Vous pouvez inclure un fichier WebVTT dans votre vidéo à l’aide de l’élément <track> :

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src : chemin vers votre fichier .vtt
• kind : type de piste texte (subtitles, captions, chapters, etc.)
• srclang : code de langue (ex. en, es)
• label : libellé de la piste affiché dans le lecteur

WebVTT vs SRT : quelles différences ?

Outils pour créer et modifier des fichiers WebVTT

Vous pouvez créer ou modifier des fichiers .vtt avec :

• Éditeurs de texte : VS Code, Sublime Text
• Éditeurs de sous‑titres : Subtitle Edit, Amara, Aegisub
• Convertisseurs : utilisez des outils pour convertir SRT en VTT et inversement

Comment ouvrir un fichier WebVTT ?

Pour ouvrir un fichier WebVTT (.vtt), vous pouvez utiliser n’importe quel éditeur de texte ou éditeur de sous‑titres.

Ouvrir dans un éditeur de texte

• Windows : Notepad, Notepad++, VS Code
• macOS : TextEdit, Sublime Text
• Linux : Gedit, nano, Vim

Comme les fichiers .vtt sont du texte brut, vous pouvez les visualiser et les modifier comme n’importe quel fichier texte ordinaire.

Ouvrir dans un éditeur de sous‑titres

Pour un meilleur formatage, aperçu et synchronisation :

• Subtitle Edit (Windows)
• Aegisub (multiplateforme)
• Amara (en ligne)

Ouvrir dans un navigateur

1. Créez un fichier HTML simple contenant une balise <video> et une balise <track>.
2. Ouvrez le fichier HTML dans un navigateur pour visualiser la vidéo avec les sous‑titres.

Caractéristiques clés des fichiers VTT

FAQ

Q1 : Quelle est la différence entre WebVTT et SRT ?
R : WebVTT est basé sur le SRT mais ajoute des fonctionnalités essentielles comme le positionnement du texte, les balises vocales, le style CSS et le support des métadonnées, ainsi qu’une intégration native avec les vidéos HTML5.

Q2 : Comment ajouter des sous‑titres WebVTT à YouTube ?
R : Téléversez votre fichier .vtt lors de l’ajout de sous‑titres à votre vidéo, ou utilisez le sous‑tittrage automatique de YouTube et téléchargez le fichier WebVTT généré pour le modifier.

Q3 : Les fichiers WebVTT peuvent‑ils contenir des images ?
R : La spécification WebVTT ne prend pas directement en charge les images intégrées, mais vous pouvez utiliser des repères de métadonnées contenant des URL et implémenter un rendu d’image personnalisé via JavaScript.

Q4 : Pourquoi mes styles WebVTT ne s’appliquent‑ils pas ?
R : Vérifiez que les blocs STYLE apparaissent avant le premier repère, qu’ils ne contiennent aucune ligne blanche et que vous utilisez correctement le pseudo‑élément ::cue. Vérifiez également la compatibilité du navigateur.

Q5 : Les fichiers WebVTT fonctionnent‑ils avec les protocoles de streaming comme HLS ?
R : Oui, HLS (HTTP Live Streaming) prend en charge les fichiers WebVTT segmentés pour le streaming efficace des légendes avec le contenu vidéo.

Références

• WebVTT : le format Web Video Text Tracks