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

 

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="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

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

 

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

Element HTML HTML embedded content HTML5 Multimedia Reference Web