Sous-titres vidéo

La balise <track>

Que l’on travaille en HTML inséré dans le texte, ou que l’on s’appuie sur du Javascript, les balises <audio> comme les balises <video> nous permettent d’accéder à des balises <track>. Cette balise va nous ouvrir la porte aux diverses fonctionnalités de sous-titrages et autres améliorations d’informations et contenus d’accessibilité. Seulement voilà, pour l’instant, un grand nombre de navigateurs n’implémentent pas encore cette possibilité (seul Opera propose une lecture du sous-titre par défaut). Donc, nous devons avoir recours à des polyfills (MediaElement.js, Captionator, Leanbackplayer, Playr, videoJS). Pour l’exemple ci-contre, nous avons employé playr. Son emploi est très simple, il suffit d’ajouter les deux fichiers (javascript et css) nécessaires, et d’ajouter ensuite class="playr_video" à l’élément vidéo concerné par le sous-titrage, et hop, le tour est joué. Enfin, pas si vite, il faut quand même avoir préparé les sous-titres en question, (au format .vtt), et paramétré les balises <track> adéquates. Avant d’aller plus loin, et histoire de tester le résultat, sélectionnez le Menu Anglais, et lancez la vidéo… regardez la mise en forme des sous-titres qui apparaissent. Commençons par les fichiers de sous-titres. Le format WebVTT (The Web Video Text Tracks Format) est un format texte, lu par les principaux navigateurs modernes, et qui est en travail de recommandation par le w3c. La syntaxe est simple,

• Chaque élément est séparé par un saut de ligne

• Les indications de timing sont données en HH:MM:SS.MSMSMS

• Temps de début et temps de fin sont séparés par une flèche -->

• Il est possible de formater l’apparence du texte

• On peut donner un identifiant à chaque élément (GAUCHE, HAUT…)

• des CSS peuvent être appliquées à ces identifiants (::cue #HAUT{} par exemple)

• des CSS peuvent être ajoutées à des textes (video::cue(.red){} par exemple)

WEBVTT

GAUCHE
00:00:00.000 --> 00:00:01.000 align:end size:15%
Left arrow
HAUT
00:00:01.000 --> 00:00:02.000 align:middle
Top <i>arrow</i>

DROITE
00:00:02.000 --> 00:00:03.000
Right <c.red>arrow</c>

Il ne reste plus qu’à ajouter les balises <tracks>, et à paramétrer leurs attributs ;

• kind, va définir la nature de la piste ajoutée, parmi ;
  • subtitles, sous-titre d’une bande son, ou d’un film, principalement basé sur la traduction des textes, ou des paroles,
  • captions, transcriptions de certaines informations relatives à une bande son ou à un film, comme des cris, ou pourquoi l’acteur a une certaine réaction. Indique également qui parle,
  • descriptions, apporte des informations relative à une bande son ou à un film, sur l’action qui se déroule,
  • chapter, indique les titres de chapitres,
  • metadata, métadonnées principalement utilisées en programmation,

• label, étiquette affichée par le menu pour permettre à l’utilisateur de choisir la piste à suivre,

• src, source du fichier vtt,

• srclang, précise le langage employé par la piste, basé sur le NWG BCP 47, appendix A,

• default, si cet attribut est spécifié (une seule piste) la piste sera utilisée par défaut par le lecteur,