Le format Web Video Text Tracks (WebVTT) est un format qui permet d'afficher des pistes de texte qui varient avec le temps (comme des sous-titres) et qui est utilisé par l'élément HTML <track>. L'objectif principal des fichiers WebVTT est d'ajouter un calque de texte à une vidéo (représentée en HTML par <video>). WebVTT est un format texte et les données doivent être encodées en UTF-8. Les espaces et les tabulations peuvent être utilisés sans distinction. Il existe également une API qui permet de représenter ces pistes et les données nécessaires à la lecture du texte au bon moment.
Le type MIME pour le format WebVTT est text/vtt.
Un fichier WebVTT (.vtt) contient des répliques qui peuvent être sur une ou plusieurs lignes, comme illustré ici :
WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. 00:05.000 --> 00:09.000 - It will perforate your stomach. - You could die.Structure WebVTT
La structure d'un fichier WebVTT se compose des éléments suivants, dont certains sont optionnels. Dans l'ordre, on a :
Un marqueur optionnel pour l'ordre des octets (BOM).
La chaîne de caractères WEBVTT.
Un texte d'en-tête optionnel à droite de WEBVTT.
WEBVTT.-->.Une ligne vide, qui est équivalente à deux nouvelles lignes consécutives.
Zéro ou plusieurs répliques ou commentaires.
Zéro ou plusieurs lignes vides.
WEBVTTExemple n°2 â un fichier WebVTT basique avec un en-tête
WEBVTT - Ce fichier n'a pas de réplique.Exemple n°3 â un exemple de fichier WebVTT usuel avec un en-tête et des répliques
WEBVTT - Ce fichier contient des répliques. 14 00:01:14.815 --> 00:01:18.114 - What? - Where are we now? 15 00:01:18.171 --> 00:01:20.991 - This is big bat country. 16 00:01:21.058 --> 00:01:23.868 - [ Bats Screeching ] - They won't get in your hair. They're after the bugs.Structure interne d'un fichier WebVTT
Reprenons un des exemples précédent et voyons la structure des répliques en détails.
WEBVTT 00:01.000 --> 00:04.000 - Never drink liquid nitrogen. 00:05.000 --> 00:09.000 - It will perforate your stomach. - You could die.
Pour chaque réplique, on a :
-->.Il est aussi possible de placer des commentaires dans un fichier .vtt qui peuvent aider à mémoriser les informations importantes concernant les parties du fichier. Ces commentaires doivent être sur des lignes séparées et commencer avec la chaîne de caractères NOTE. Nous les aborderons en détails dans la section qui suit.
Il est important de ne pas utiliser de lignes vides supplémentaires au sein d'une réplique ou entre la ligne d'horodatage et le texte de la réplique. En effet, le format WebVTT est basé sur les lignes et une ligne vide terminera la réplique.
Les commentaires sont un composant optionnel qu'on peut ajouter afin d'inclure des informations dans un fichier WebVTT. Les commentaires sont destinés aux personnes qui lisent manuellement le fichier, ils ne seront pas vus des personnes consultant la vidéo. Les commentaires peuvent contenir des sauts de ligne mais pas de lignes vides (ce qui correspond à deux sauts de ligne consécutifs). Une ligne vide indique la fin d'un commentaire.
Un commentaire ne peut pas contenir la chaîne de caractères -->, une esperluette (&), ou un chevron ouvrant (<). Pour utiliser ces caractères, il faudra les échapper, par exemple avec & pour l'esperluette et < pour le chevron ouvrant. Il est également recommandé d'utiliser l'entité pour le chevron fermant (>) plutôt que le caractère littéral correspondant (>), cela permet d'éviter la confusion avec les balises.
Un commentaire se compose de trois parties :
NOTE.NOTE Voici un commentaire
NOTE Un commentaire qui s'étend sur plusieurs lignes. NOTE On peut aussi écrire un commentaire sur plusieurs lignes de cette façon.
WEBVTT - Traduction d'un film que j'aime NOTE Cette traduction a été réalisée par Kyle afin que certains de ses amis puissent voir le film avec leurs parents. 1 00:02:15.000 --> 00:02:20.000 - Ta en kopp varmt te. - Det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - Har en kopp te. - Det smakar som te. NOTE La traduction de cette dernière ligne peut être à revoir. 3 00:02:25.000 --> 00:02:30.000 - Ta en koppMettre en forme les sous-titres WebVTT
Les sous-titres WebVTT peuvent être mis en forme en ciblant les éléments correspondants avec le pseudo-élément ::cue.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Avec ce fragment CSS, tous les sous-titres des éléments vidéo utilisent un dégradé linéaire de gris comme arrière-plan et une couleur de premier plan "papayawhip". De plus, les textes mis en gras avec l'élément <b> auront la couleur "peachpuff".
Le fragment de HTML suivant s'occupe quant à lui de gérer l'affichage du média.
<video controls autoplay src="video.webm">
<track default src="track.vtt" />
</video>
La mise en forme peut également être définie directement dans le fichier WebVTT. Dans ce cas, on insère les règles CSS dans le fichier et chaque règle est précédée d'une ligne contenant la chaîne de caractères STYLE, comme illustré ici :
WEBVTT
STYLE
::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
/* Les blocs de style ne peuvent pas avoir de lignes vides ou "tiret tiret chevron fermant". */
NOTE On peut utiliser des blocs de commentaires entre les blocs de style.
STYLE
::cue(b) {
color: peachpuff;
}
00:00:00.000 --> 00:00:10.000
- Coucou <b>monde</b>.
NOTE Les blocs de style ne peuvent pas apparaître après la première réplique.
On peut aussi utiliser des identifiants dans le fichier WebVTT. Ces derniers pourront être utilisés pour définir un style particulier pour certaines répliques données du fichier. Dans l'exemple suivant, on veut que le texte sur la transcription soit surligné en rouge et que les autres parties soient normales. Voici ce qu'on peut faire avec CSS, où on utilise les mêmes séquences d'échappement qu'au sein des pages HTML :
WEBVTT 1 00:00.000 --> 00:02.000 That's an, an, that's an L! crédit de transcription 00:04.000 --> 00:05.000 Transcrit par Célestesâ¢
::cue(#\31) {
color: lime;
}
::cue(#crédit\ de\ transcription) {
color: red;
}
Le positionnement des pistes de texte est également pris en charge en incluant les informations de positionnement après l'horodatage, comme on peut le voir dans cet exemple (voir les paramètres des répliques pour plus d'informations) :
WEBVTT 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% Where did he go? 00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% I think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% What are you waiting for?WebVTT cues
Une réplique (cue en anglais) est un bloc de sous-titre distinct qui possède un temps de début, un temps de fin et un texte. Dans l'exemple n°6, on a un en-tête, une ligne vide, puis 5 répliques séparées par des lignes vides. Une réplique possède 5 composants :
1 - Texte défilant introductif 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start Il y a bien longtemps, dans une galaxie lointaine, très lointaineâ¦Identifiant de réplique
L'identifiant est un nom qui identifie la réplique. Il peut être utilisé pour faire référence à la réplique depuis un script. Un identifiant ne doit pas contenir de saut de ligne ni la chaîne de caractères -->. Il doit se terminer avec un seul saut de ligne. Les identifiants ne sont pas nécessairement uniques, même s'il est habituel de les numéroter (par exemple, 1, 2, 3â¦).
1 - Texte défilant introductifExemple n°9 â utilisation habituelle des identifiants
WEBVTT 1 00:00:22.230 --> 00:00:24.606 Voici le premier sous-titre. 2 00:00:30.739 --> 00:00:34.074 Et là le deuxième. 3 00:00:34.159 --> 00:00:35.743 Ici le troisième.Horodatage des répliques
Un horodatage d'une réplique indique le moment où la réplique est affichée sur la vidéo. Il est composé d'un temps de début et d'un temps de fin. Le temps de fin doit être supérieur au temps de début et le temps de début doit être supérieur ou égal aux temps de début précédents. Les répliques peuvent avoir des horodatages qui se chevauchent.
Si le fichier est utilisé pour des chapitres (c'est-à -dire des éléments <track> dont l'attribut kind vaut chapters), le fichier ne pourra pas contenir de durées qui se chevauchent.
Chaque horodatage contient cinq composants :
-->.Les heures doivent être dans l'un de ces formats :
mm:ss.ttthh:mm:ss.tttOù :
hh désigne les heures
9999:00:00.000).mm désigne les minutes
00 et 59 (inclus).ss désigne les secondes.
00 et 59 (inclus).ttt désigne les millisecondes.
000 et 999 (inclus).00:00:22.230 --> 00:00:24.606 00:00:30.739 --> 00:00:34.074 00:00:34.159 --> 00:00:35.743 00:00:35.827 --> 00:00:40.122Exemple n°11 â exemples d'horodatages qui se chevauchent
00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000Exemple n°12 â exemples d'horodatage qui ne se chevauchent pas
00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000Paramètres des répliques
Les paramètres de réplique sont des composants optionnels utilisés afin de positionner le texte affiché sur la vidéo. Cela comprend l'affichage horizontal ou vertical du texte. Il peut y avoir zéro ou plusieurs paramètres, qui peuvent être utilisés dans n'importe quel ordre tant que chaque paramètre n'est pas utilisé plus d'une fois.
Les paramètres sont ajoutés à droite de l'horodatage, après au moins un espace après l'horodatage. Il doit y avoir au moins un espace entre chaque paramètre. Le nom d'un paramètre et la valeur associée sont séparés par deux-points (:). Les paramètres sont sensibles à la casse et on utilisera donc les minuscules comme indiqué ici. Il existe cinq paramètres :
vertical
vertical vertical:rl La direction d'écriture est de droite à gauche. vertical:lr La direction d'écriture est de gauche à droite.line
Indique l'emplacement vertical du texte ou, si le paramètre vertical est défini, l'emplacement horizontal du texte.
La valeur peut être un numéro de ligne
Ou un pourcentage
%).line vertical omis vertical:rl vertical:lr line:0 haut droite gauche line:-1 bas gauche droite line:0% haut droite gauche line:100% bas gauche droiteposition
vertical est utilisé, l'emplacement vertical du texte.%).position vertical omis vertical:rl vertical:lr position:0% gauche haut haut position:100% droite bas bassize
vertical est utilisé, la hauteur de la zone de texte.%).size vertical omis vertical:rl vertical:lr size:100% toute la largeur toute la hauteur toute la hauteur size:50% la moitié de la largeur la moitié de la hauteur la moitié de la hauteuralign
size s'il est utilisé.align vertical omis vertical:rl vertical:lr align:start gauche haut haut align:center centré horizontalement centré verticalement centré verticalement align:end droite bas basLa première ligne illustre l'absence de paramètre. La seconde ligne illustre ce qu'on pourrait faire pour afficher le texte sur un panneau ou une étiquette à l'écran. La troisième ligne pourrait être utilisée pour un titre. La dernière ligne pourrait être utilisée pour du texte d'une langue asiatique.
00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:endCharge utile (texte) d'une réplique
La charge utile d'une réplique contient l'information principale. En règle générale, il s'agit des sous-titres à afficher. Cette charge utile peut contenir des sauts de ligne mais pas de ligne vide (ce qui équivaut à deux sauts de ligne successifs). Une ligne vide indique la fin d'une réplique.
La charge utile d'une réplique ne peut pas contenir la chaîne de caractères -->, une esperluette (&), ou un chevron ouvrant (<). Il faudra à la place utiliser les entités correspondantes pour les échapper : & pour l'esperluette et < pour le chevron. Il est recommandé de faire de même pour le chevron fermant (c'est-à -dire d'utiliser > plutôt que >) pour éviter toute confusion avec les balises. Dans le cas où le fichier WebVTT est utilisé pour des métadonnées, ces restrictions ne s'appliquent pas.
En plus des trois échappements décrits ci-avant, il existe quatre autres échappements qui sont décrits dans le tableau suivant.
Tableau 6 - séquences d'échappement Nom Caractère Séquence d'échappement Esperluette && Chevron ouvrant < < Chevron fermant > > Marque gauche-à -droite ‎ Marque droite-à -gauche ‏ Espace insécable Balises pour les textes des répliques
Il existe plusieurs balises, telles que <bold>, qui peuvent être utilisées. Toutefois, si le fichier WebVTT est utilisé dans un élément <track> dont l'attribut kind vaut chapters, les balises ne pourront pas être utilisées.
Balise d'horodatage
1 00:16.500 --> 00:18.500 When the moon <00:17.500>hits your eye 1 00:00:18.500 --> 00:00:20.500 Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie 1 00:00:20.500 --> 00:00:21.500 That's <00:00:21.000>amore
Les balises suivantes sont des balises qui sont autorisées au sein d'une réplique et pour lesquelles il faut avoir la balise ouvrante et la balise fermante (par exemple <b>texte</b>).
Balise de classe (<c></c>)
Balise d'italique (<i></i>)
Balise de gras (<b></b>)
Balise de soulignement (<u></u>)
Balise ruby (<ruby></ruby>)
<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
Balise de texte ruby (<rt></rt>)
<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
Balise de voix (<v></v>)
Les méthodes utilisées en WebVTT sont celles utilisées pour modifier la réplique ou la région, les attributs des deux interfaces étant différents. On peut les catégoriser distinctement afin de mieux comprendre les rôles respectifs de ces interfaces pour WebVTT :
VTTCue
Les méthodes disponibles avec cette interface sont :
GetCueAsHTML() qui permet d'obtenir le code HTML de la réplique.VTTCue(), le constructeur qui permet de créer de nouveaux objets.Autokeyword().DirectionSetting() qui définit la direction de la légende ou du texte d'un fichier.LineAlignment() qui ajuste l'alignement de la ligne.PositionAlignSetting() qui ajuste la position du texte.VTTRegion
Les méthodes utilisées pour les régions sont :
ScrollSetting() qui permet d'ajuster le paramètre de défilement pour tous les nÅuds présents dans une région donnée.VTTRegion(), le constructeur qui permet de créer de nouveaux objets.En plusieurs étapes, il est possible d'écrire un fichier WebVTT simple. Pour commencer, il suffit d'avoir un éditeur de texte et d'enregistrer le fichier en utilisant l'extension '.vtt'. Voici comment procéder :
Ouvrir un éditeur de texte.
La première ligne d'un fichier WebVTT est standardisée et on écrira donc ce qui suit sur la toute première ligne :
WEBVTT
La deuxième ligne est vide et à la troisième ligne, on indique le moment où la première réplique doit être affichée. Ainsi, si la première réplique doit s'afficher après 1 seconde et disparaître après 5 secondes de vidéo, on écrira :
00:01.000 --> 00:05.000
Su la ligne suivante, on écrit le texte correspondant (qui sera donc affiché entre la première et la cinquième seconde, incluses).
En répétant les étapes 3 et 4, on pourra ainsi composer un fichier WebVTT complet pour un fichier audio ou vidéo.
Les pseudo-classes CSS permettent de classer le type d'un objet à différencier d'un autre type d'objet. Elles fonctionnent de façon similaire entre les fichiers WebVTT et les fichiers HTML.
WebVTT permet d'utiliser les fonctionnalités de localisation et les classes comme on peut le faire en HTML et CSS afin de classifier la mise en forme d'un certain type d'objet, comme on peut le voir dans cet exemple :
WEBVTT 04:02.500 --> 04:05.000 J'ai commencé le basket à l'âge de 13, 14 ans 04:05.001 --> 04:07.800 Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
Dans l'exemple précédent, on peut voir l'utilisation d'un identifiant et d'un nom de pseudo-classe pour indiquer la langue d'une réplique et la balise <i> utilisée pour l'italique.
Le type de pseudo-classe est déterminé par le sélecteur utilisé et fonctionne de façon analogue à ce qu'on peut voir en HTML. Les pseudo-classes CSS suivantes peuvent être utilisées :
lang (par exemple p:lang(it))link (par exemple a:link)nth-last-child (par exemple p:nth-last-child(2))nth-child (par exemple p:nth-child(2))Où p et a sont les balises utilisées en HTML pour représenter les paragraphes et les liens en HTML. Dans un contexte WebVTT, on pourra les remplacer dans ces exemples par des identifiants de réplique.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4