Sous-titrer des vidéos HTML5 : balise track

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 (perso j'ai encore cette demande de fonctionnalité en attente).

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 (présenté ici) 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 (<b>) ou italique (<i>), 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 !

La spécification n'étant pas facile à décrypter, je vous renvoie plutôt vers ces différentes synthèses si vous souhaitez avoir un aperçu des possibilités du format.

La balise video (rappel)

Vous connaissez déjà la balise video « classique » :

<video controls src="http://libre-ouvert.toile-libre.org/video.webm">
</video>

On peut prévoir quelques raffinements, comme de proposer alternativement plusieurs formats de la même vidéo pour maximiser la compatibilité, une image fixe à afficher en attendant le déroulé de la vidéo, ainsi qu'un texte à afficher alternativement pour les navigateurs ne gérant pas la balise video :

<video poster="video.png" controls>
<source src="http://libre-ouvert.toile-libre.org/video.mp4" type="video/mp4">
<source src="http://libre-ouvert.toile-libre.org/video.webm" type="video/webm">
<source src="http://libre-ouvert.toile-libre.org/video.ogv" type="video/ogg">
Votre navigateur ne prend pas en charge la vidéo HTML5
</video>

Deux remarques :

• il faut penser à mettre le fichier MP4 en premier lorsqu'il existe, car il semble que Safari soit bogué et ne lise pas la suite sinon (les autres navigateurs parcourant bien en revanche la liste des formats disponibles jusqu'à en trouver un pris en charge),
• pour la variante XHTML, penser à remplacer controls par controls="controls" dans ces exemples comme dans les suivants.

La balise track

Si je reprends les exemples précédents en ajoutant l'affichage du sous-titre au moyen de la balise track, ça donne :

Version simple :

<video controls src="http://libre-ouvert.toile-libre.org/video.webm">
<track kind="subtitles" srclang="fr-FR" src="http://libre-ouvert.toile-libre.org/subtitles.fr.vtt" lang="fr">
</video>

Version élaborée :

<video poster="video.png" controls>
<source src="http://libre-ouvert.toile-libre.org/video.mp4" type="video/mp4">
<source src="http://libre-ouvert.toile-libre.org/video.webm" type="video/webm">
<source src="http://libre-ouvert.toile-libre.org/video.ogv" type="video/ogg">
<track kind="subtitles" srclang="fr-FR" src="http://libre-ouvert.toile-libre.org/subtitles.fr.vtt" lang="fr">
Votre navigateur ne prend pas en charge la vidéo HTML5
</video>

NB : la balise track a plusieurs attributs (textes descriptifs pour aveugles/sourds, sous-titres, etc.) ; c'est « subtitles » qui nous intéresse ici pour proposer la transcription du propos ainsi que sa traduction dans différentes langues.

Pour disposer de plusieurs sous-titres alternatifs, c'est le même principe que pour la balise video : il suffit de prévoir autant de lignes que nécessaire. Il est alors souhaitable d'ajouter l'attribut label pour faciliter la sélection côté utilisateur :

<video poster="video.png" controls>
<source src="http://libre-ouvert.toile-libre.org/video.mp4" type="video/mp4">
<source src="http://libre-ouvert.toile-libre.org/video.webm" type="video/webm">
<source src="http://libre-ouvert.toile-libre.org/video.ogv" type="video/ogg">
<track kind="subtitles" srclang="fr-FR" label="Français" src="http://libre-ouvert.toile-libre.org/subtitles.fr.vtt" lang="fr">
<track kind="subtitles" srclang="en" label="English" src="http://libre-ouvert.toile-libre.org/subtitles.en.vtt" lang="en">
Votre navigateur ne prend pas en charge la vidéo HTML5
</video>

Démonstration :

(La vidéo d'exemple – télécharger la vidéo (5,1 Mio) ici et le sous-titre là – montre Richard Stallman en septembre 2010 à l’occasion du Software Freedom Day. Il s'agit d'un extrait du film « Patent Absurdity: how software patents broke the system » visible ici.)