<track>
Spécifie une piste textuelle synchronisée pour video ou audio : sous-titres, légendes, descriptions, chapitres ou métadonnées.
Description
L’élément <track> est void et spécifie une piste textuelle au format WebVTT associée à une <video> ou un <audio>. Il permet d’ajouter des sous-titres, des légendes pour les sourds et malentendants, des descriptions audio, des chapitres ou des métadonnées synchronisées.
Syntaxe
<video controls src="video.mp4">
<track kind="subtitles" src="sous-titres.fr.vtt" srclang="fr" label="Français" default>
</video>
Exemples
Sous-titres multilingues :
<video controls src="conference.mp4" width="1280" height="720">
<track kind="subtitles" src="conf.fr.vtt" srclang="fr" label="Français" default>
<track kind="subtitles" src="conf.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="conf.es.vtt" srclang="es" label="Español">
</video>
Légendes pour malentendants + chapitres :
<video controls src="tutoriel.mp4">
<track kind="captions" src="captions.fr.vtt" srclang="fr" label="Sous-titres (malentendants)" default>
<track kind="chapters" src="chapters.vtt" label="Chapitres">
</video>
Attributs spécifiques
| Attribut | Type | Description |
|---|---|---|
kind | enum | Type de piste : subtitles (sous-titres), captions (légendes), descriptions (descriptions audio), chapters (chapitres), metadata. |
src | URL | URL du fichier WebVTT. Obligatoire. |
srclang | string | Code de langue BCP 47 (ex. fr, en-US). Obligatoire pour kind="subtitles". |
label | string | Libellé visible dans le menu de sélection de pistes. |
default | boolean | Piste activée par défaut si aucune préférence n’est définie. |
Notes
subtitles vs captions : subtitles traduit les dialogues pour les non-natifs ; captions transcrit également les sons non verbaux (musique, effets) pour les personnes sourdes ou malentendantes. Pour l’accessibilité (WCAG 1.2.2), utiliser captions.
Format WebVTT : fichier texte .vtt avec des cues synchronisées. Exemple minimal :
WEBVTT
00:00:01.000 --> 00:00:04.000
Bonjour et bienvenue dans ce tutoriel. Support navigateurs
Chrome23+ · Firefox31+ · Safari6+ · Edge12+