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

Rédigé par antistress le 23 janvier 2011 (mis à jour le 27 avril 2016) - 1 commentaire

Vieux film sous-titré

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.

Pour aller plus loin :

Concernant la balise track de HTML5 :

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

1 commentaire

#1  - Buzut a dit :

Le plugin jQuery est bien, il y a d'autres solutions js vraiment ergonomiques, mais le problème reste qu'en fullscreen, on n'a plus les sous-titres !

Répondre

Fil RSS des commentaires de cet article

É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 la troisième lettre du mot mbrbvk ?