antistress : Sous-titrer des vidéos HTML5 : balise track
samedi 3 juin 2017 à 16:30
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. Par ailleurs, alors que la balise track est exploitable par Firefox depuis sa version 31, un bogue de ce dernier empêchait encore il y a quelque mois l'affichage des sous-titres lorsque la vidéo était au format Ogv, bogue qui a été corrigé depuis.
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 () ou italique (), 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 » :
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 :
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
controlsparcontrols="controls"dans ces exemples comme dans les suivants.
video :
- Introduction à l'élément HTML5
video(fr) et Everything you need to know about HTML5videoandaudio(en) sur dev.opera.com - Mode d'emploi des balises
audioetvideo(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
videoavec multiples solutions de repli : version courte (en) sur hacks.mozilla.org ; version longue (en) sur camendesign.com
Quelques tutos complémentaires sur ce blogue en suivant le tag vidéo HTML5.
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 :
Version élaborée :
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 :
Démonstration :
(la vidéo d'exemple – télécharger la vidéo (5,1 Mio) ici et le sous-titre là – montre Richard Stallman en septembre 2010 à l’occasion du Software Freedom Day)
Original post of antistress.Votez pour ce billet sur Planet Libre.
