Elément html5 track (avec polyfill) - exemples

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 sous-titrée en utilisant track (avec polyfill captionator):

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>

Le polyfill captionator.js est utilisé pour compenseser un manque de support des navigateurs.

Support

Navigateurs

L'élément track n'est pas encore supporté par beaucoup de navigateurs. Voir Can I use. Pour que les sous-titres s'affichent il faut utiliser un polyfill Javascript comme captionator. Même alors, tous les navigateurs ne gèrent pas les sous-titres de la même manière.

Firefox affiche les sous-titres mais aucun bouton ne permet de les cacher ou de les afficher. Si plusieurs tracks sont présents, il n'est pas possible de faire une sélection.
Chrome affiche les sous-titres et a un bouton 'CC' qui permet de les activer ou désactiver.
IE9 affiche les sous-titres et les boutons de contrôle, mais aucun bouton 'CC'.
IE10 affiche les sous-titres et a un bouton 'CC' qui permet de les activer ou désactiver. IL est également possible de sélectionner un parmi plusieurs tracks.
Safari

Lecteurs d'écran

Support par les lecteurs d'écran
VoiceOver 6
Jaws 14
NVDA 2013
SuperNova 13.03 (+IE9)	Le lecteur vidéo est inutilisable. SuperNova ne le voit pas.

Clavier

Conseil

Si vous utilisez l'élément video vous pouvez utiliser track pour afficher les sous-titres. Veillez à ce que ceux-ci soient affichés par défaut car tous les navigateurs ne permettent pas de les cacher. Problème avec certains lecteurs d'écran?