Sous-titrer des vidéos HTML5 : balise track

Rédigé par antistress le 03 juin 2017 (mis à jour le 08 février 2021) - Aucun commentaire

Vieux film sous-titré

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. La balise track est exploitable par Firefox depuis sa version 31 (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 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

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 (grâce à l'attribut poster. Et si vous n'avez pas défini cet attribut, c'est la première image de la vidéo qui sera affichée par défaut), 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.
Quelques tutos que j'ai sélectionnés pour vous si vous souhaitez approfondir l'usage de la balise video :
Introduction à l'élément HTML5 video (fr) et Everything you need to know about HTML5 video and audio (en) sur dev.opera.com ;
Mode d'emploi des balises audio et video (en) sur developer.mozilla.org (à noter : les liens donnés en fin d'article sont disponibles en plusieurs langues, dont le français : il suffit de choisir sa langue via le bouton en haut à droite de la page) ;
— Mode d'emploi de la balise video avec multiples solutions de repli : version courte (en) sur hacks.mozilla.org ; version longue (en) sur camendesign.com.

La balise track

Explications

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

Voici le code de la vidéo ci-après (NB : l'attribut default de la balise track indique que c'est cette piste qui doit être activée par défaut, tandis que l'attribut preload, auquel est affecté la valeur none, de la balise video indique que la vidéo ne doit être chargée qu'à la demande de l'utilisateur) :

<video preload="none" src="/data/documents/stallman_on_patent_absurdity_512x288.ogv" type="video/ogg" controls="controls" poster="data/images/vorhang-auf-by-kersten-a-riechers--cc-by-20_640x426.jpg" width="512" height="288"> <track kind="subtitles" lang="fr" srclang="fr-FR" label="Français" src="/data/documents/stallman_on_patent_absurdity.vtt" default>Votre navigateur ne prend pas en charge la vidéo HTML5</video>

(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. Il s'agit d'un extrait du film « Patent Absurdity: how software patents broke the system » visible ici.)

Écrire un commentaire

NB : en publiant votre commentaire, vous acceptez qu'il soit placé sous la licence CC BY-SA comme indiqué aux conditions d'utilisation du site

Quelle est le quatrième caractère du mot ez9m3dj8 ?