W3C spec: The track element allows authors to specify explicit external timed text tracks for media elements. It does not represent anything on its own.

L'élément track permet d'associer des fichiers externes de type 'timed text' à un média (par exemple élément video). On peut associer plusieurs track à un élément média.

• L'attribut kind permet de définir la nature du track : subtitle pour des sous-titres, caption pour des sous-titres pour personnes sourdes et malentendantes, descriptionpour ajouter une description qui pourra être lue par une synthèse vocale, chapter ou metadata.
• L'attribut srclang permet de définir la langue du track.
• L'attribut label permet de nommer chaque track (utile quand il y en a plusieurs).

---

Exemple

Vidéo en Langue des signes (LSFB) sous-titrée en utilisant track. Comportement attendu : les sous-titres sont affichés et un bouton de contrôle ('CC') permet de les cacher et des les afficher.

Les sous-titres ne s'affichent pas dans tous les navigateurs. Dans les navigateurs qui affichent les sous-titres, le bouton pour afficher et masquer les sous-titres n'est pas toujours présent. Voir exemple avec polyfill qui marche dans tous les navigateurs.

---

Code

<video id ="my-video" width="470" height="320" controls>
    <source src="AnysurferLsfbFr.mp4" type="video/mp4" >
    <source src="AnysurferLsfbFr.ogv" type="video/ogg" >
    <source src="AnysurferLsfbFr.webm" type="video/webm" >
    <track kind ="captions" src="captions/Anysurfer_LSFB_FR.vtt" srclang="fr" lang="fr" label="français" default>
</video>

---

Support

Navigateurs

Voir Can I use.

• Dans Firefox (54) les sous-titres sont affichés, et il y a un bouton CC pour les activer ou désactiver.
• Chrome affiche les sous-titres et a un bouton 'CC' qui permet de les activer ou désactiver.
• IE10 n'affiche pas les sous-titres, mais un bouton 'CC' est présent. En principe cela devrait fonctionner, voir exemple sur la page de microsoft
• Safari sur mac OSX 10.9.3 (mavericks) affiche les sous-titres mais pas le bouton pour les activer ou désactiver.
• Safari sur iOS7 affiche les sous-titres et offre la possibilité de d'activer et désactiver les sous-titres. C'est le lecteur multimédia Quicktime qui est utilisé.

Pour que les sous-titres s'affichent partout il faut pour l'instant encore utiliser un polyfill Javascript comme captionator.js. Même alors, tous les navigateurs ne gèrent pas les sous-titres de la même manière.

Lecteurs d'écran (pas encore testé)

Les sous-titres ne sont pas destinés à être lus par un lecteur d'écran. Le comportement attendu est donc que le lecteur d'écran ne les lise pas.

Clavier

Les sous-titres doivent en principe pourvoir être affichés ou cachés au moyen du clavier. Ce n'est pas possible dans tous les navigateurs avec le bouton prévu par le navigateur.

---

Conseil

Si vous utilisez l'élément video vous pouvez utiliser track pour afficher les sous-titres. Utilisez un polyfill comme captionator pour que les sous-titres s'affichent dans tous les navigateurs. Veillez à ce que ceux-ci soient affichés par défaut car tous les navigateurs ne permettent pas de les cacher. Prévoyez des boutons de contrôle externes au lecteur HTML5 pour que tout le monde puisse utiliser le lecteur vidéo.