Web/API/HTMLTrackElement

The HTMLTrackElement interface represents an HTML <track> element within the [[../../../Glossary/DOM|DOM]]. This element can be used as a child of either <audio> or <video> to specify a text track containing information such as closed captions or subtitles.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLTrackElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

Inherits properties from its parent, HTMLElement.

HTMLTrackElement.kind

Is a DOMString that reflects the kind HTML attribute, indicating how the text track is meant to be used. Possible values are: subtitles, captions, descriptions, chapters, or metadata.

HTMLTrackElement.src

Is a DOMString that reflects the src HTML attribute, indicating the address of the text track data.

HTMLTrackElement.srclang

Is a DOMString that reflects the srclang HTML attribute, indicating the language of the text track data.

HTMLTrackElement.label

Is a DOMString that reflects the label HTML attribute, indicating a user-readable title for the track.

HTMLTrackElement.default

A Boolean reflecting the default attribute, indicating that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.

HTMLTrackElement.readyState Read only

Returns an unsigned short that show the readiness state of the track:

Constant	Value	Description
`NONE`	0	Indicates that the text track's cues have not been obtained.
`LOADING`	1	Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track by the parser.
`LOADED`	2	Indicates that the text track has been loaded with no fatal errors.
`ERROR`	3	Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way. Some or all of the cues are likely missing and will not be obtained.

HTMLTrackElement.track Read only

Returns TextTrack is the track element's text track data.

Methods

No specific method; inherits methods from its parent, HTMLElement.

Events

The following events may be fired on a <track> element, in addition to any that may be fired at its parent, HTMLElement.

cuechange: Sent when the underlying TextTrack has changed the currently-presented cues. This event is always sent to the TextTrack but is also sent to the HTMLTrackElement if one is associated with the track. You may also use the oncuechange event handler to establish a handler for this event.

Usage notes

Loading of the track's text resource

The WebVTT or TTML data describing the actual cues for the text track isn't loaded if the track's mode is initially in the disabled state. If you need to be able to perform any processing on the track after the <track> is set up, you should instead ensure that the track's mode is either hidden (if you don't want it to start out being presented to the user) or showing (to initially display the track). You can then change the mode as desired later.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLTrackElement' in that specification.	Living Standard
HTML5The definition of 'HTMLTrackElement' 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
`HTMLTrackElement`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Notes' Full support 31 Notes' Notes' Prior to Firefox 50, text tracks would only load if the <track> element is in a document. No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Notes' Full support 31 Notes' Notes' Prior to Firefox 50, text tracks would only load if the <track> element is in a document. No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5
`cuechange` event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 68	IE No support No	Opera ?	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 68	Opera Android ?	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`default`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	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 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	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 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5
`readyState`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5
`src`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Notes' Full support 31 Notes' Notes' Setting the `src` property did not work properly in versions prior to 50. No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Notes' Full support 31 Notes' Notes' Setting the `src` property did not work properly in versions prior to 50. No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	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 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5
`track`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 No support No	Opera Full support 12	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support 25	Firefox Android Full support 31 Full support 31 No support 24 — 30 Disabled' Disabled' From version 24 until version 30 (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 Full support 12	Safari iOS Full support Yes	Samsung Internet Android Full support 1.5

Legend

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