HTML - <track>
The HTML <track>
element 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.
Example
<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>
Description
The HTML <track>
element 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.
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
.
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 parent elements | A media element, before any flow content. |
Normative document | HTML5, section 4.8.9 |
Attributes
Includes the Global Attributes.
Name | Version | Description |
---|---|---|
default |
This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one track element per media element. |
|
kind |
How the text track is meant to be used. If omitted the default kind is subtitles . 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:
|
|
label |
A user-readable title of the text track which is used by the browser when listing available text tracks. | |
src |
Address of the track (.vtt file). Must be a valid URL. This attribute must be defined. |
|
srclang |
Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 23 | 24 (24)[2] | 10 | 12.10 | 6 |
src attribute settable |
? | 50 (50)[3] | ? | ? | ? |
Invalid kind value as metadata |
No support | No support | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 25[1] | 24.0 (24)[2] | No support | No support | No support |
src attribute settable |
? | 50.0 (50)[3] | No support | No support | No support |
Invalid kind value as metadata |
No support | No support | No support | No support | No support |
[1] In Chrome for Android, the <track>
element doesn’t work for fullscreen video yet.
[2] The <track>
element, the HTMLTrackElement
interface, and associated APIs were implemented in Firefox 24 behind the preference media.webvtt.enabled
, which is disabled by default. To enable WebVTT support, set this preference to true
. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false
.
[3] Until Firefox 50, the src
attribute is settable, but the change does not get handled properly. Starting in Firefox 50, existing track data is properly disposed of, new track data is loaded and put into effect, and so forth.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
HTML5 The definition of '<track>' in that specification. |
Recommendation | Initial definition |
DOM interface
This element implements the HTMLTrackElement
interface.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/track