The HTMLTrackElement
interface represents an HTML <track>
element within the 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="/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="/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="/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="/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="/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 thekind
HTML attribute, indicating how the text track is meant to be used. Possible values are:subtitles
,captions
,descriptions
,chapters
, ormetadata
. HTMLTrackElement.src
- Is a
DOMString
that reflects thesrc
HTML attribute, indicating the address of the text track data. HTMLTrackElement.srclang
- Is a
DOMString
that reflects thesrclang
HTML attribute, indicating the language of the text track data. HTMLTrackElement.label
- Is a
DOMString
that reflects thelabel
HTML attribute, indicating a user-readable title for the track. HTMLTrackElement.default
- A
Boolean
reflecting thedefault
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 theTextTrack
but is also sent to theHTMLTrackElement
if one is associated with the track.
You may also use theoncuechange
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 Standard The definition of 'HTMLTrackElement' in that specification. |
Living Standard | |
HTML5 The definition of 'HTMLTrackElement' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLTrackElement | Chrome Full support 23 | Edge Full support ≤18 | Firefox
Full support
31
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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.
See also
- The HTML element implementing this interface:
<track>
.