Sous-titrer des vidéos HTML5 en attendant la balise track

Vous savez maintenant que la vidéo sur le Web est à un tournant, et qu'il est désormais possible de publier une vidéo sur le Web aussi facilement qu'une image, grâce à la balise video de HTML5.

Fini la contrainte de recourir au greffon Flash propriétaire : tout navigateur récent – citons les dernières versions de Firefox (Mozilla), Opera (Opera Software), Chrome (Google) et Safari (Apple) ainsi que la version 9 à paraître d'Internet Explorer (Microsoft) – est désormais capable d'afficher de la vidéo tout seul, comme un grand.

Certes il reste la question essentielle du choix du codec, mais je veux vous parler d'une toute autre chose aujourd'hui. Savez-vous que la balise video sera prochainement complétée d'une balise track permettant d'afficher en temps réel les sous-titres contenus dans un fichier ad hoc ?

La vidéo directement dans le navigateur promet beaucoup, et en attendant la finalisation de la balise track et son implémentation dans les principaux navigateurs, nous allons voir, démonstrations à l'appui, comment parvenir au même résultat avec les technologies actuelles (balise video de HTML5 associée à du code code JavaScript).

Pour commencer il vous faut une vidéo 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 « .srt ».

• 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 et garanti sans mono) pour GNU/Linux/*BSD, ou en ligne avec un service comme Universal Subtitles qui autorise le sous-titrage collaboratif.

Première solution : Universal Subtitles

Universal Subtitles se veut le tout-en-un du sous-titrage collaboratif. C'est un service en ligne de création collaborative et d'hébergement de sous-titrages qui fournit un lecteur de vidéo customisé gérant les sous-titres sous la forme d'un bout de code HTML5 et JavaScript à ajouter à son site (sous licence AGPL).

Enfantin et puissant puisque le lecteur customisé permet à tout à chacun d’accéder rapidement à l'interface du site pour améliorer le sous-titre ou en ajouter dans d'autres langues à partir du travail de synchronisation déjà effectué.

Le code dudit lecteur peut ensuite être retouché à la main pour utiliser des fonctionnalités supplémentaires (indiquer des url alternatives pour la vidéo dans différents formats...). Il est également possible de spécifier la langue à afficher par défaut en cas de pluralité de sous-titres.

Si vous avez un logiciel de sous-titrage habituel, vous pourrez l'utiliser et uploader le fichier créé.

Exemple :

Deuxième solution : jQuery srt

jQuery srt est une bibliothèque JavaScript qui s'appuie sur une autre, jQuery (toutes deux étant sous double licence GNU GPL et MIT), pour permettre d'afficher le sous-titre d'un fichier SRT en même temps qu'une vidéo faisant usage de la balise dédiée de HTML5. C'est également à son auteur, j^, que l'on doit l'excellent ffmpeg2theora par exemple.

La syntaxe est simple : elle consiste à ajouter un paramètre dans la balise video (id=) pour faire le lien ensuite lors de l'appel du sous-titre (data-video=) :

<video src="nom_du_fichier_de_la_vidéo.ogv" id="nom_du_fichier_de_la_vidéo" />
<div class="srt" data-video="nom_du_fichier_de_la_vidéo" data-srt="nom_du_fichier_de_sous_titres.srt"></div>

Avantages/inconvénients :

• Si vous avez déjà la vidéo et le sous-titre sur votre blogue, pas la peine d'en passer par Universal Subtitles (mais si la vidéo est hébergée sur un serveur qui tient la charge, créer une page dédiée sur Universal Subtitles avec un lien vers la vidéo et y uploader le sous-titre permettra à d'autre de traduire/améliorer les sous-titres),
• Avec jQuery srt vous pouvez héberger le sous-titre pour éviter qu'il ne soit modifié (avec les avantages/inconvénients qui vont avec). Inversement je n'ai pas trouvé comment obtenir les liens directs vers les fichiers de sous-titres hébergés sur Universel Subtitles : il semble que ceux-ci soient générés à la volée à partir de la base de données du service.
• Du strict point de vue de l'esthétisme et du confort, je trouve bien plus agréable d'avoir le sous-titre défilant sous la vidéo : ça « agrandit » la vidéo (on respire !) et c'est très lisible (on déclare la taille et la couleur de la police dans les propriétés CSS comme tout autre élément du site). C'est un des nombreux avantages par rapport au Flash : tout fait partie de la page, on n'est pas limité à la fenêtre du greffon.

Exemple :

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.

---

Pour aller plus loin :

Concernant la balise track de HTML5 :

• State of Media Accessibility in HTML5 sur ginger's thoughts, le blogue de Silvia Pfeiffer,
• La spécification sur le site du W3C.

Concernant les différentes méthodes d'affichage de sous-titres à base de JavaScript :

• Les alternatives aux systèmes proposés ici,
• Le script d'un développeur d'Opera qui a l'inconvénient de ne pas se baser sur les traditionnels fichiers SRT mais l'avantage exclusif d'afficher automatiquement le transcript de la vidéo lorsque JavaScript est désactivé dans le navigateur (à essayer, c'est remarquable).