<track>

La balise <track> est utilisée pour fournir des sous-titres, des légendes, ou des métadonnées temporelles à une vidéo ou un fichier audio.

Elle est toujours utilisée en combinaison avec les balises <video> ou <audio>. Cette balise améliore l'accessibilité en permettant aux utilisateurs de suivre le contenu, même sans le son ou dans une autre langue. Utilisez donc les sous-titres autant que vous le pouvez ! 😋

Structure et syntaxe de la balise <track>

Structure et syntaxe de base

La balise <track> est une balise autonome (elle se ferme sur elle-même) qui n'a pas de contenu ni de balise de fermeture. Elle est placée à l'intérieur des balises <video> ou <audio>.

Prenons un petit exemple :

<track
    kind=[type de piste]
    src=[chemin vers le fichier de sous-titres]
    srclang=[code de langue]
    label=[description de la piste] />

La balise <track> se compose de quatre attributs importants :

1. kind : Définit le type de piste. Par exemple :
   1. "subtitles" pour les sous-titres ;
   2. "captions" pour des légendes détaillant les sons et dialogues ;
   3. "descriptions" pour des descriptions audio du contenu visuel (comme une image) ;
   4. "chapters" pour donner les chapitres de la piste audio ou vidéo (et ainsi proposer des éléments cliquables) ;
   5. "metadata" pour des informations complémentaires.
2. src : Spécifie l'URL du fichier qui contient les sous-titres ;
3. srclang : Définit la langue de la piste avec un code ISO 639-1, par exemple fr pour le français, en pour l'anglais ;
4. label : Ajoute une description visible par l'utilisateur qui sera affichée sur le lecteur ;
5. default : Si cette attribut est présent, cette piste sera activée par défaut (utile quand vous avez plusieurs langues de sous-titres).

Exemples d'utilisation

Pour une vidéo

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subtitles_fr.vtt" srclang="fr" label="Français">
</video>

Dans cet exemple :

• La première piste (anglaise) est activée par défaut grâce à l'attribut default.
• Une deuxième piste en français est disponible.

Pour une piste audio

<audio controls>
  <source src="audio/podcast.mp3" type="audio/mpeg">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</audio>

ici, nous proposons un fichier audio "audio/postcast.mp3" suivi d'une bande de sous-titres "captions_en.vtt" en anglais.

Attributs

Attributs spécifiques à la balise <track>

Attributs généraux

Tous les attributs classiques comme title, class ou encore id sont utilisables également sur la balise <track>.

Compatibilité des navigateurs