• Introduction
• Introduction au HTML5
• Présentation
• Prise en main
• Utiliser des balises
• Utiliser des attributs
• Structurer un document avec HTML5
• Le doctype : définir l'utilisation du HTML
• L'en-tête
• Structure de l'information
• Organiser le contenu
• Ecrire du texte
• Des caractères spéciaux
• Listes
• Tableaux
• Naviguer grâce aux liens
• Le multimédia
• Images
• Video
• Audio
• Sous-titrage HTML
• Fallbacks
• Interface avec l'utilisateur
• Les formulaires
• Les balises d'interface
• Annexes
• Différences en xHTML et HTML5
• Glossaire
• test

Sous-titrage HTML avec track

En plaçant des vidéos ou des sons sur le un site internet, celles-ci peuvent nécessiter des commentaires ou encore des traductions, dits track. Si ces commentaires peuvent être simplement écrits dans la même page que la vidéo, laissant au visiteur le choix de s'y reporter, il est cependant de coutume, en particulier au cinéma, de sous-titrer les contenus. Si cette solution engendre une superposition dans l'image qui peut parfois être gênante, il permet cependant de garder le regard mieux concentré sur la partie essentielle.

Utiliser l'élément track

La recommandation HTML donne la possibilité d'utiliser un tel système sur les vidéos ou sur les sons, en accompagnement des balises respectives : audio et video. Cette possibilité peut être utilisée par le biais de la balise track qui est fille de audio ou video. Pour fonctionner la balise track devra être compléter par des informations complémentaires, comme par exemple le fichier ressource du sous-titrage et éventuellement sa langue. Nous aboutirons ainsi à un code de base comme suit :

<video src="elephants-dream.webm">
 <track src="elephants-dream-en.vtt" srclang="en" default />
 <track src="elephants-dream-fr.vtt" srclang="fr" />
</video>

Track va donc disposer de plusieurs attributs qu'il faudrait utiliser selon les besoins :

src

est obligatoire. Il spécifie l'URL du fichier qui contient la traduction

srclang

est obligatoire si l'élément kind est omis ou s'il possède la valeur subtitles. Il permet de définir la langue du fichier contenant la traduction. Comme dans le cas de l'attribut lang du HTML, le code de langue doit être conforme à la rfc.

default

mentionne quelle est le texte qui sera pris par défaut si aucune langue ne convient.

kind

est optionnel mais lorsqu'il est omis prend la valeur subtitles (sous-titre). Il peut aussi prendre les autres valeurs : captions (affiché en surimpression comme subtitles), descriptions (pour décrire le contenu en particulier pour les synthèses vocales), chapters (pour aider à la navigation), metadata

label

enfin, label, optionnel, permet d'afficher un texte mentionnant le titre du track.

On aura la même chose avec des éléments source et en complétant avec ces attributs:

<video autoplay controls>
 <source src="elephants-dream.mp4" type="video/mp4" />
 <source src="elephants-dream.webm" type="video/webm" />
 <track src="elephants-dream-en.vtt" label="English" kind="subtitles" srclang="en" default />
 <track src="elephants-dream-fr.vtt"label="Français" kind="subtitles" srclang="fr" />
 <track label="English chapters" kind="chapters" srclang="en" src="chapters-en.vtt">
</video> 

Créer un fichier vtt pour les sous-titres

Le plus gros du travail reste encore cependant à fournir. Car fournir un fichier un sous-titre implique que celui existe. Le système retenu se base sur un simple fichier texte contenant les dialogues ou descriptions à afficher. On ajoutera une référence temporelle pointant le moment auquel il doit apparaître.

Il s'agit alors d'un simple fichier texte :

• commençant par la mention WebVTT

et pour chaque changement :

• donne un identifiant
• spécifie la plage  temporelle d'affichage en hh:mm:ss.msmsms (heure:minute:seconde:milliseconde)
• mentionne le texte

ce qui donne :

WEBVTT 
Cle-34 
00:01:35.000 --> 00:01:40.000 
Follow Me !!

Pour aller plus loin, le fichier vtt peut contenir des informations permettant de modifier partiellement l'affichage. ici :

i, b et u

vont spécifier une mise en italique, gras ou sousligné

c

va définir l'utilisation d'une classe css. Elle sera explicitement nommé avec la notation pointée typique du css sous la forme c.maclasse

Cela donnera alors le résultat:

Cle-34 
00:01:35.000 --> 00:01:40.000 
<i Proog>Follow Me !!</i>

ou

Cle-34 
00:01:35.000 --> 00:01:40.000 
<c.proog>Follow Me !!</c>

enfin, nous pourrons utiliser les pseudo-element css

video::cue(i) { font-weight:bold; font-style:italic}