L'élément HTML <track> est utilisé comme élément fils d'un élément <audio> ou <video> et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon le format WebVTT (ce sont des fichiers .vtt) (WebVTT pour Web Video Text Tracks) ou selon le format Timed Text Markup Language (TTML).

Catégories de contenu Aucune
Contenu autorisé Aucun, cet élément est un élément vide.
Omission de balises Étant un élément vide, la balise de début doit être présente et il ne doit pas y avoir de balise de fin.
Parents autorisés Un élément média avant tout autre contenu de flux.
Rôles ARIA autorisés Aucune.
Interface DOM HTMLTrackElement

Attributs

À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

default
Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut.
kind
La façon dont la piste texte doit être utilisée. La valeur par défaut est subtitles et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur metadata. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
  • subtitles (la valeur par défaut)
    • Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais.
    • Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.).
  • captions
    • La piste est une retransciption voire une traduction de la partie audio du média.
    • La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.).
    • Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé.
  • descriptions
    • La piste est une description textuelle du contenu vidéo.
    • Ce type de piste est adapté aux personnes malvoyantes ou lorsque la vidéo ne peut pas être vue.
  • chapters
    • Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média.
  • metadata
    • La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur.
label
Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles.
src
L'adresse du fichier pour la piste (celle du fichier.vtt). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent <audio> ou <video> de l'élément <track> possède un attribut crossorigin.
srclang
La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue BCP 47. Si l'attribut kind vaut subtitles, l'attribut srclang doit obligatoirement être défini.

Notes d'utilisation

Un élément média (<audio> ou <video>) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs kind, srclang et label.

Exemples

HTML

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="chapitres.vtt" srclang="en">
   <track kind="subtitles" src="soustitres_de.vtt" srclang="de">
   <track kind="subtitles" src="soustitres_en.vtt" srclang="en">
   <track kind="subtitles" src="soustitres_ja.vtt" srclang="ja">
   <track kind="subtitles" src="soustitres_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
   <!-- Contenu alternatif pour les navigateurs qui 
        ne prennent pas en charge video -->
   ...
</video>

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de 'track element' dans cette spécification.
Standard évolutif  
HTML5
La définition de 'track element' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Doesn’t work for fullscreen video.
Chrome Android Support complet 25
Notes
Support complet 25
Notes
Notes Doesn’t work for fullscreen video.
Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
defaultChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
kindChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
labelChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
srcChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
srclangChrome Support complet 23Edge Support complet OuiFirefox Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10Opera Support complet 12.1Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet 31
Support complet 31
Aucun support 24 — 50
Désactivée
Désactivée From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, dashdashzako, tregagnon, Jeremie, Goofy
Dernière mise à jour par : SphinxKnight,