Sous-titrer des vidéos HTML5 : balise track et solution de repli en JavaScript

Dans mon précédent billet j'évoquais la possibilité de sous-titrer des vidéos HTML5 avec un fichier SRT et du code JavaScript, en attendant l'implémentation de la balise track dans nos navigateurs.

L'idéal serait d'utiliser un code hybride pour préparer le futur : le sous-titrage serait réalisé en JavaScript en l'absence de prise en charge de la balise track. En revanche, lorsqu'elle serait prise en charge, la balise track serait utilisée prioritairement.

C'est ce que propose la bibliothèque JavaScript websrt.js réalisée par Edd Hannay à partir du travail de Philip Jägenstedt (Opera Software).

Comment ça marche : les balises video et track de HTML5 avec solution de repli en JavaSCript

La balise video

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

<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 cet exemple comme dans les suivants.

La balise track

Avec l'affichage du sous-titre au moyen de la balise track, ça donne :

<video poster="video.png" controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<track kind="subtitles" srclang="fr-FR" src="subtitles.wsrt" />
Votre navigateur ne prend pas en charge la vidéo HTML5
</video>

Deux remarques :

• il faut espérer que les navigateurs seront tolérants et accepteront les fichiers au format très répandu SRT en plus du WEBVTT qui est le format officiel de sous-titres choisi pour le Web, les deux se ressemblant beaucoup à première vue,
• la balise a plusieurs attributs (textes descriptifs pour aveugles/sourds, sous-titres, etc.) ; ici c'est "subtitles" qui nous intéresse en l'espèce pour proposer la transcription du propos et sa traduction dans différentes langues.

Pour mettre plusieurs sous-titres, c'est le même principe que pour la balise video : il suffit de mettre 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.ogv" type="video/ogg" />
<track kind="subtitles" srclang="fr-FR" label="Français" src="subtitles.fr.wsrt" />
<track kind="subtitles" srclang="en" label="English" src="subtitles.en.wsrt" />
Votre navigateur ne prend pas en charge la vidéo HTML5
</video>

Solution de repli en JavaScript

Il suffit de prévoir de charger les bibliothèques JavaScript jQuery (sous double licence GNU GPL et MIT) et jQuery VideoSub en plus du code ci-dessus. Cette dernière bibliothèque prendra la main pour afficher les sous-titres dans les navigateurs supportant déjà la balise video mais pas encore la balise track. Dans le cas contraire, elle se fera oublier.

Exemple :

Avantage : L'avantage majeur de cette solution est que, si l’exécution du code JavaScript est désactivée dans le navigateur, ce dernier affichera quand même ce qu'il reconnait : la vidéo voire le sous-titre. Ainsi en cas de diffusion sur un Planet ou dans un agrégateur de flux RSS où le code JavaSCript est généralement désactivé, les balises HTML5 restent fonctionnelles.

La vidéo d'exemple – télécharger la vidéo (27,7 Mio) ici et le sous-titre là – montre Richard Stallman en septembre 2010 à l’occasion du Software Freedom Day.