WebVTT

Introduction

Le format WebVTT (des pistes de texte Web Video) est un format destiné à marquer les ressources de pistes externes de texte. La principale utilisation des fichiers WebVTT est le sous-titrage du contenu de vidéo (WebVTT, retr 23. Avril 2012). Un WebVTT comporte une liste de soi-disant queues qui peuvent être utilisées par un lecteur afin de superposer des informations sur la vidéo (par exemple des textes ou des graphiques) ainsi que pour la navigation.

WebVTT peut être utilisé dans l'élément de piste de HTML5 vidéo. Différents fichiers de pistes peuvent être rattachés à une unique vidéo, par exemple différents fichiers de langues ou des fichiers de formats différents ou de types divers. En Avril 2012, les navigateurs prennent en charge ce format soit partiellement (comme Chrome), soit pas du tout, cependant certains lecteurs HTML5 à base de JavaScript mettent en œuvre différents sous-ensembles de WebVTT ou de normes concurrentes telles que le format SRT simple.

Voir aussi:

• Timed Text (TT ou TTML) est un format concurrent plus ancien à la base de XML que de fait nous préférons.
• HTML5 audio et vidéo

Format

Le format WebVTT est un format "texte intégral" assez complexe. Malgré cela, il n'utilise pas XML. Cependant, des parties de ses données(les contenus des indices ou "cue contents") peuvent inclure quelques balises semblables au XML.

Structure du fichier

Un fichier WebVTT a la structure suivante:

• La première ligne doit contenir uniquement le mot "WEBVTT"
• La deuxième ligne doit être vide
• Autant de saisies de texte voulues, aussi nommées indices, séparées par une ligne vide

De plus:

• Vous devez utiliser l'encodage de caractères UFT-8
• Les fichiers doivent être affichés comme text/vtt, par ex. additionner l'instruction suivante à un serveur Apache http.conf ou à un fichier htacess

AddType text/vtt .vtt

• Le retour à la ligne peut utiliser des caractères semblables à ceux de Windows ou Unix, par ex. \r \n ou \r \n. Cela signifie simplement que si vous voyez une nouvelle ligne dans l'éditeur de texte, alors vous faites les choses correctement.
• Les &, < et > doivent être remplacées par &amp;, &lt;, et &gt;

Exemple simple

Il fonctionne avec Chrome 18, mais vous devrez autoriser la piste(track) utilisant chrome://flags URI . Chercher "track", le bouton à activer.

Fichier de la piste(Track File):

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia est un grande aventure. Il peut avoir ses défauts, mais c'est le plus grand effort collectif de construction de connaissances

Disclaimer
00:01:10.000 --> 00:02:10.000
C'est juste une piste de démo utilisant VTT

Comme vous pouvez le voir, il y a une en-tête "WEBVTT" et les indices sont séparés par des lignes blanches. Nous expliquerons la syntaxe de ces indices ci-dessous.

WebVTT dans HTML5

La balise <track> de HTML5 permet d'insérer les sous-titres au format WebVTT à une vidéo affichée avec la balise <video>. Cette balise est normalement prise en charge par l'ensemble des navigateurs Internet.

Lire l'article HTML5 audio and video pour plus de détails

<video id="movie1" controls preload="metadata">
 <source src="videos/state-of-wikipedia-480x272.mp4"/>
 <source src="videos/state-of-wikipedia-480x272.ogv"/>
 <source src="videos/state-of-wikipedia-480x272.webm"/>
 <track kind="subtitles" label="EN subtitles" src="subtitles_en.vtt" srclang="en" default/>   
 <track kind="subtitles" label="Soustitre en FR" src="subtitles_fr.vtt" srclang="fr"/>
        Your browser doesn't support HTML5. Maybe you should upgrade.
</video>

Exemples de fichiers:

• http://tecfa.unige.ch/guides/html/html5-video/html5-video-track.html (ATTENTION : l'exemple n'est pas validé par le W3C!)
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt

Validation W3C

Les exemples données sur EduTechWiki FR et EN ne semble pas valide lors de la validation par le W3C. La solution est d'utiliser kind="captions" à la place de kind="subtitles".

Indices simples

Les indices ont grossièrement la structure suivante :

(1)Un sous-titre

celui-ci ne peut pas inclure les éléments suivants: "-->" ou \r, \n, \r, \n

(2) Une ligne pour le timing et des instructions optionnelles, c'est-à-dire les paramètres des indices

heure de départ --> heure d'arrivée [paramètres des indices]

utiliser le format hh:mm:ss.mmm ou plus court mm:ss.mmm. Noter les deux points ":" et le point "."

Suivi éventuellement des instructions optionnelles

Exemples de lignes de "timing"

00.00.01.000 --> 00.01.01.017
00.01.000 --> 01.01.017
00.00.01.000 --> 00.01.01.017 T:50%

(3)Une ou plusieurs lignes de texte

Le texte qui doit être affiché. Ce texte peut contenir des balises HTML comme:

Voice: <v voice name> permet de définir une voix (nom de la personne qui parle)

CSS class: <c.classname> texte ...</c> ceci tient compte d'un style CSS flexible défini dans le HTML

Gras: <b> texte... </b>

Italique: <i> texte... </i>

Souligner:<u> texte... </u>

un texte avec plusieurs lignes: <p> texte... </p><p> texte... </p>

(4) Une ligne vide

Exemple de saisie de texte simple :

WEBVTT

1
00:00:00.000 --> 00:00:10.000
Ceci est une <b>très courte</b> video qui ne parle pas de WEBVTT

Outils

• HTML5 Video Caption Maker (online service, Microsoft)

Réferences

Traduction de l'article WebVTT

Exemples

Simple exemple 1 (extrait du projet de spécification)

WEBVTT

00:11.000 --> 00:13.000
<v Roger Bingham>We are in New York City

00:13.000 --> 00:16.000
<v Roger Bingham>We're actually at the Lucern Hotel, just down the street

Simple exemple utilisant le lecteur Leanback

<div class="leanback-player-video">
  <video controls="controls" preload="metadata" poster="wikipedialogo.png" width="480" height="272">
   <source src="videos/state-of-wikipedia-480x272.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="videos/state-of-wikipedia-480x272.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="videos/state-of-wikipedia-480x272.ogv" type='video/ogg; codecs="theora, vorbis"' />
 
   <track enabled="true" kind="subtitles" label="EN"
          src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
   <track enabled="true" kind="subtitles" label="EN VTT"
          src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
   <track enabled="true" kind="subtitles" label="FR" 
          src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
   <object class="leanback-player-flash-fallback" width="640" height="360"
           type="application/x-shockwave-flash"
           data="http://releases.flowplayer.org/swf/flowplayer.swf">
      <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer.swf" />
      <param name="allowFullScreen" value="true" />
      <param name="wmode" value="opaque" />
      <param name="bgcolor" value="#000000" />
      <param name="flashVars" 
             value="config={'playlist':['wikipedialogo.png', 
		{'url':'videos/state-of-wikipedia-480x272.mp4','autoPlay':false,'autobuffering':false}]}" />
   </object>
   <div class="leanback-player-html-fallback" style="width: 640px; height: 360px;">
     <img src="wikipedialogo.png" width="640" height="360" alt="Poster Image" 
          title="No HTML5-Video playback capabilities found. Please download the video(s) below." />
    <div>
<strong>Download Video:</strong>
   <a href="videos/state-of-wikipedia-480x272.mp4">.mp4</a>
   <a href="videos/state-of-wikipedia-480x272.webm">.webm</a>
   <a href="videos/state-of-wikipedia-480x272.ogv">.ogv</a>
 </div>
</div>
</div>

Une page d'exemple utilisant le lecteur Leanback  :

• http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html

Fichiers vtt pour la balise "Track":

• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.srt
• http://tecfa.unige.ch/guides/html/html5-video/subtitles_fr.vtt

Comme vous pouvez le voir ce lecteur s'appuie sur un balisage supplémentaire:

• Un div d'emballage de class = "Leanback lecteur-vidéo"
• Deux attributs supplémentaires concernant track (illégaux mais inoffensifs) : enabled = "true" et type = "....". Cependant, nous ne avons pas testé ce qui se passe si ceux-ci sont omises.

Peut-être l'activation n'est pas nécessaire car elle peut être configuré dans le Javascript et le type n'est peut-être pas nécessaire pour des tests en local

Réferences

Traduction de l'article WebVTT