Contexte : voici un billet que j'ai commencé à rédiger à l'époque de Firefox 5 tandis que la balise track était encore en développement sous l'égide du WHATWG avec notamment la participation active de Ian Hickson (Hixie) et Silvia Pfeiffer. Par ailleurs, alors que la balise track est exploitable par Firefox depuis sa version 31, un bogue de ce dernier empêchait encore il y a quelque mois l'affichage des sous-titres lorsque la vidéo était au format Ogv, bogue qui a été corrigé depuis.

Entrons à présent dans le vif du sujet.

Pour le dire en quelques mots : la spécification HTML5 permet d'associer à la balise video une balise track dont l'objet est de gérer l'affichage de sous-titres (le navigateur se chargeant alors d'incruster en temps réel à une vidéo donnée les sous-titres décrits dans un fichier qui lui est indiqué).

Voyons à présent comment marche cette balise, et quelle méthode utiliser afin de ne pas exclure les navigateurs qui ne la supportent pas.

Pour commencer il vous faut une vidéo, de préférence dans un format libre et ouvert (WebM ou Ogv) et un fichier comprenant les sous-titres et les informations de synchronisation temporelle au format WebVTT.

• La vidéo peut-être hébergée sur votre espace personnel ou n'importe où en ligne : il vous faudra alors simplement son url. Il existe différents services d'hébergement de vidéos acceptant les formats WebM et/ou Ogg Theora, citons blip.tv, Internet Archive et videobin.org par exemple.
• Le sous-titre pourra avoir été généré hors-ligne, par exemple avec le logiciel Subtitle Editor (sous licence GNU GPLv3) pour GNU/Linux/*BSD, ou en ligne avec un service comme Amara qui autorise le sous-titrage collaboratif.

Le fichier WebVTT

Un fichier WebVTT, pour commencer, c'est essentiellement un banal fichier texte doté de l'extension « .vtt ».

La syntaxe d'un fichier WebVTT est définie ici. Je vous en donne un exemple :

WEBVTT

1
00:00:00.10 --> 00:00:02.70
Bienvenue à la journée du logiciel libre.

2
00:00:02.76 --> 00:00:04.34
Je m'appelle Richard Stallman.

3
00:00:04.34 --> 00:00:09.20
J'ai créé le mouvement du logiciel libre 
en septembre 1983

On remarque qu'un fichier WebVTT ressemble fortement à un fichier SRT, à quelques exceptions près :

• Le fichier commence avec la chaîne de caractères « WEBVTT »,
• Les virgules entre les secondes et les millisecondes sont remplacées par des points dans l'horodatage (les virgules sont une spécificité du SRT qui s'explique par son origine française).

Le format autorise un formatage riche : taille (en pourcentage) et positionnement du texte (horizontalement et verticalement), mise en gras () ou italique (), coloration... Vous pouvez même réaliser un sous-titrage karaoké en précisant au sein de la ligne la durée de chaque mot !