Balise HTML <track>
La balise <track> ajoute des sous-titres, légendes, descriptions, chapitres ou métadonnées aux éléments <audio> et <video> via des fichiers WebVTT.
La balise <track> est l'un des éléments HTML5. Elle ajoute des pistes de texte synchronisées — sous-titres, légendes, descriptions, chapitres ou métadonnées — à un élément multimédia <video> ou <audio>. Une piste est le moyen standard de rendre les médias accessibles : elle permet aux spectateurs sourds ou malentendants de lire ce qui est dit, aide les non-francophones à suivre le contenu, et permet aux navigateurs de proposer une navigation par chapitres.
L'élément <track> est toujours un enfant d'un élément <video> ou <audio>, placé après les éventuels éléments <source>. Il est vide et pointe (via src) vers un fichier externe WebVTT (.vtt) contenant le texte synchronisé. Le navigateur affiche ce texte automatiquement pendant la lecture du média.
Un seul élément multimédia peut contenir plusieurs éléments <track> — par exemple un par langue — mais il ne peut pas avoir deux pistes partageant le même kind, srclang et label.
Syntaxe
La balise <track> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Mais en XHTML, la balise <track> doit être auto-fermante (<track />).
Balise HTML <track>
<audio> or <video>
...
<track src="...">
...
</audio> or </video>Exemple de la balise HTML <track> :
Balise HTML <track>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
default | default | Marque la piste comme celle à activer par défaut, sauf si les préférences de l'utilisateur indiquent qu'une autre est plus appropriée. Un seul élément <track> par élément multimédia peut avoir cet attribut. |
kind | subtitles, captions, descriptions, chapters, metadata | Définit le type de piste de texte (voir le tableau ci-dessous). Par défaut : subtitles. |
label | text | Un titre lisible par l'humain pour la piste. C'est le nom affiché à l'utilisateur dans le menu de sélection de piste du lecteur (ex. : « English », « Français »). |
src | URL | Le chemin vers le fichier WebVTT (.vtt). Requis. |
srclang | language_code | La langue du texte de la piste sous forme de balise BCP 47 (ex. : en, fr, pt-BR). Requis lorsque kind="subtitles". |
Valeurs de l'attribut kind
| Valeur | Utilisation |
|---|---|
subtitles | Traduction des dialogues pour les spectateurs qui peuvent entendre mais ne comprennent pas nécessairement la langue. Requiert srclang. |
captions | Transcription des dialogues plus les sons non verbaux (effets sonores, indicateurs musicaux, identification du locuteur). Destiné aux spectateurs sourds et malentendants. |
descriptions | Descriptions textuelles du contenu visuel de la vidéo, destinées à être lues à voix haute (synthèse vocale) pour les utilisateurs aveugles ou malvoyants lorsque l'action n'est pas transmise par l'audio. |
chapters | Titres de chapitres utilisés pour naviguer dans le média. |
metadata | Données destinées à être utilisées par des scripts. Cette piste n'est pas affichée à l'utilisateur. |
La balise <track> prend également en charge les attributs globaux et les attributs d'événements.
Qu'est-ce qu'un fichier WebVTT ?
Le texte affiché par une <track> est stocké dans un fichier séparé écrit au format WebVTT (Web Video Text Tracks), enregistré avec l'extension .vtt et servi en tant que text/vtt. Chaque fichier WebVTT commence par la ligne WEBVTT, suivie d'un ou plusieurs cues. Chaque cue possède une plage horaire (start --> end, au format hh:mm:ss.ttt) et le texte à afficher pendant cette plage :
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the demo video.On peut avoir plusieurs cues, éventuellement séparés par des lignes vides, et chaque cue peut avoir une ligne d'identifiant optionnelle au-dessus de son horodatage. Le navigateur fait correspondre le temps de lecture actuel à un cue et affiche son texte sur le média.
Exemple avec plusieurs pistes
Une configuration courante consiste à proposer des légendes dans une langue et des sous-titres dans une autre. Donnez à chaque piste un label clair afin que les utilisateurs puissent choisir la bonne depuis le menu du lecteur, et marquez une seule piste comme default :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video
controls
width="320"
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
>
<track
default
kind="captions"
srclang="en"
label="English"
src="captions-en.vtt"
/>
<track
kind="subtitles"
srclang="fr"
label="Français"
src="subtitles-fr.vtt"
/>
</video>
</body>
</html>Le lecteur affiche les entrées « English » et « Français » dans son menu de sous-titres/légendes ; les légendes en anglais apparaissent par défaut car cette piste porte l'attribut default.
Accessibilité
L'élément <track> est le mécanisme HTML pour satisfaire les critères de succès clés de WCAG :
- Sous-titres (WCAG 1.2.2) — fournissez un
<track kind="captions">afin que les utilisateurs sourds et malentendants puissent percevoir à la fois les dialogues et les sons importants dans les médias pré-enregistrés. - Audiodescription (WCAG 1.2.3 / 1.2.5) — fournissez un
<track kind="descriptions">afin que les utilisateurs aveugles et malvoyants reçoivent une description des informations visuelles importantes.
Le texte de la piste étant du texte synchronisé dans un fichier séparé, les moteurs de recherche et les technologies d'assistance peuvent également le lire, ce qui améliore à la fois l'accessibilité et la découvrabilité.