The <track> is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).
| Content categories | None |
|---|---|
| Permitted content | None, it is an empty element. |
| Tag omission | As it is a void element, the start tag must be present and the end tag must not be present. |
| Permitted parents | A media element, before any flow content. |
| Permitted ARIA roles | None |
| DOM interface | HTMLTrackElement |
This element includes the global attributes.
defaulttrack element per media element.kindsubtitles. If the attribute is not present, it will use the subtitles. If the attribute contains an invalid value, it will use metadata. (Versions of Chrome earlier than 52 treated an invalid value as subtitles.) The following keywords are allowed: subtitles captions descriptions chapters metadata labelsrc.vtt file). Must be a valid URL. This attribute must be specified and its URL value must have the same origin as the document — unless the <audio> or <video> parent element of the track element has a crossorigin attribute.srclangkind attribute is set to subtitles, then srclang must be defined.The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.
A media element cannot have more than one track with the same kind, srclang, and label.
<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="sampleChapters.vtt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
<track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
<track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
<track kind="subtitles" src="sampleSubtitles_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">
<!-- Fallback -->
...
</video>
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'track element' in that specification. | Living Standard | |
| HTML5 The definition of 'track element' in that specification. | Recommendation | Initial definition |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 23 | Yes | 31
|
10 | 12.1 | 6 |
default |
23 | Yes | 31
|
10 | 12.1 | 6 |
kind |
23 | Yes | 31
|
10 | 12.1 | 6 |
label |
23 | Yes | 31
|
10 | 12.1 | 6 |
src |
23 | Yes | 31
|
10 | 12.1 | 6 |
srclang |
23 | Yes | 31
|
10 | 12.1 | 6 |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Yes
|
25
|
Yes | 31
|
? | ? | Yes |
default |
4.4 | 25 | Yes | 31
|
? | ? | Yes |
kind |
4.4 | 25 | Yes | 31
|
? | ? | Yes |
label |
4.4 | 25 | Yes | 31
|
? | ? | Yes |
src |
4.4 | 25 | Yes | 31
|
? | ? | Yes |
srclang |
4.4 | 25 | Yes | 31
|
? | ? | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track