Sous-titrer des vidéos HTML5 : balise track

Rédigé par antistress le 01 janvier 2007 (mis à jour le 09 mai 2016) -

Vieux film sous-titré

Les développements de la spécification HTML5 qui se poursuivent permettront bientôt d'associer à la récente balise video une balise track dont l'objet sera 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é).

Le travail est réalisé comme d'habitude sous l'égide du WHATWG, avec notamment la participation active de Ian Hickson (Hixie) et Silvia Pfeiffer.

Attention : si la spécification de la balise track ne devrait plus changer, celle du fichier de sous-titres WebVTT qui alimentera cette nouvelle balise peut encore évoluer légèrement.

On regrettera à ce sujet que le classique et très répandu format SRT n'ait pas été retenu : cela aurait pourtant facilité la vie de beaucoup de monde. Souhaitons que les navigateurs fassent preuve de souplesse et le supportent également, ou que des convertisseurs SRT→WebVTT soient proposés (qui veut bien développer un script Python ?).

Parlons des navigateurs, justement : quand supporteront-ils la balise track ? Firefox 6, qui doit sortir au troisième trimestre, supportera cette nouvelle balise ; dès à présent vous pouvez télécharger la version alpha/aurora ici ( pour les utilisateurs de Debian). Gageons que les autre navigateurs suivront rapidement.

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

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

  • 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 (<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="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="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="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="video.webm">
<track kind="subtitles" srclang="fr-FR" src="subtitles.fr.vtt" lang="fr">
</video>

Version élaborée :


<video poster="video.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<track kind="subtitles" srclang="fr-FR" src="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="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<track kind="subtitles" srclang="fr-FR" label="Français" src="subtitles.fr.vtt" lang="fr">
<track kind="subtitles" srclang="en" label="English" src="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 – montre Richard Stallman en septembre 2010 à l’occasion du Software Freedom Day)

Les commentaires sont fermés.