Anatomie d'un fichier WebVTT : en-tête, NOTE, STYLE et identifiants

Exemple annoté

WEBVTT

NOTE Ceci est un commentaire, jamais affiché.

intro
00:00:01.000 --> 00:00:04.000 align:start
Bonjour à tous.

00:00:05.000 --> 00:00:08.500
Voici la suite.

Les éléments, selon la documentation MDN

• En-tête : éventuellement un BOM, puis WEBVTT, puis un texte facultatif séparé par un espace. Il ne peut pas contenir -->.
• NOTE : commentaire d'auteur, utilisable partout après l'en-tête, jamais affiché. Il ne peut pas contenir de ligne vide, -->, & ni <.
• STYLE : règles CSS (::cue), à placer avant le premier sous-titre.
• Identifiant : ligne facultative avant l'horodatage. Il ne doit pas contenir --> et n'a pas à être unique ; la numérotation y est fréquente.
• Horodatage : mm:ss.ttt ou hh:mm:ss.ttt. L'heure de fin doit être postérieure à celle de début, et les débuts ne doivent pas reculer.
• Paramètres après l'horodatage : vertical, line, position, size, align.

Erreurs courantes

1. Pas de ligne « WEBVTT » au début : le fichier est rejeté par les lecteurs.
2. Virgule au lieu du point avant les millisecondes (héritage SRT) ; voir virgule ou point.
3. NOTE ou STYLE contenant une ligne vide : le bloc est coupé.
4. Un « & » ou un « < » non échappé dans le texte.

Ce qui est perdu en passant en SRT

Les NOTE, STYLE, paramètres de position et balises propres au VTT n'existent pas en SRT. Le convertisseur vous les signale. Pour la comparaison complète, voir SRT ou VTT. Pour les balises dans le texte, voir italique, gras et autres balises.

Rappel des limites

Cette page décrit la syntaxe telle que documentée par MDN à la date de consultation. Les lecteurs n'implémentent pas tous toutes les fonctions (positionnement, régions, style). Testez chaque fonction avancée dans le lecteur visé avant de vous y fier.

Un bloc STYLE

WEBVTT

STYLE
::cue {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

00:00:01.000 --> 00:00:03.000
Texte sur fond sombre.

Le bloc STYLE s'écrit après l'en-tête et avant le premier sous-titre. Il ne peut pas contenir de ligne vide. Les propriétés acceptées par ::cue sont limitées, et tous les lecteurs n'appliquent pas les styles déclarés dans le fichier : certains préfèrent les réglages choisis par l'utilisateur.

Un bloc REGION

Une région définit une zone de l'écran où s'affichent des sous-titres, par exemple pour un défilement de type « rouleau » sur plusieurs lignes. Elle se déclare après l'en-tête avec un identifiant, puis un sous-titre s'y rattache avec le paramètre region: suivi de cet identifiant. La prise en charge des régions par les lecteurs est inégale : réservez-les aux cas où vous pouvez tester le rendu final.

Questions fréquentes

Le texte placé après « WEBVTT » est-il affiché ?

Non. Il sert de description du fichier, pour l'auteur ou les outils, et n'apparaît jamais à l'écran. Il doit être séparé de « WEBVTT » par une espace et ne pas contenir de flèche.

Où placer les blocs NOTE ?

N'importe où après l'en-tête, entre deux blocs, séparés par une ligne vide. Ils sont pratiques pour indiquer la version de la vidéo, la date de relecture ou une consigne pour le prochain correcteur.

Un identifiant peut-il contenir des espaces ?

Oui, tant qu'il tient sur une ligne et ne contient pas la flèche -->. Des identifiants courts et sans espace (« intro », « scene-2 ») restent plus faciles à manipuler dans des scripts ou des feuilles de style.