Web/HTML/Element/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.

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, `<audio>` or `<video>`.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLTrackElement`

Attributes

This element includes the global attributes.

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

Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film. Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.

captions

Closed captions provide a transcription and possibly a translation of audio. It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character). Suitable for users who are deaf or when the sound is muted.

descriptions

Textual description of the video content. Suitable for users who are blind or where the video cannot be seen.

chapters

Chapter titles are intended to be used when the user is navigating the media resource.

metadata

Tracks used by scripts. Not visible to the user.

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 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.
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.

Usage notes

Track data types

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.

Detecting cue changes

The underlying TextTrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.

If the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the HTMLTrackElement.

let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

In addition, you can use the oncuechange event handler:

let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
});

Examples

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

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'track element' in that specification.	Living Standard
HTML5The definition of 'track element' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`track`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support Yes Notes' Full support Yes Notes' Notes' Doesn't work for fullscreen video.	Chrome Android Full support 25 Notes' Full support 25 Notes' Notes' Doesn't work for fullscreen video.	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 6	Samsung Internet Android Full support 1.5 Notes' Full support 1.5 Notes' Notes' Doesn't work for fullscreen video.
`default`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 1.5
`kind`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 1.5
`label`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 1.5
`src`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 1.5
`srclang`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 10	Opera Full support 12.1	Safari Full support 6	WebView Android Full support 4.4	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 50 Disabled' Disabled' 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 Full support 1.5

Legend

Full support: Full support
Compatibility unknown: Compatibility unknown
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.