TextTrack

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The TextTrack interface of the WebVTT API represents a text track associated with a media element.

An object of this type owns the list of VTTCue objects that will be displayed over the video at various points.

TextTrack objects can be added to a HTMLVideoElement or HTMLAudioElement element using the HTMLMediaElement.addTextTrack() method, which has the same effect as adding text tracks declaratively using <track> elements inside a <video> or <audio> element. The TextTrack objects are stored in a TextTrackList, which can be retrieved using the HTMLMediaElement.textTracks property.

EventTarget TextTrack

Instance properties

This interface also inherits properties from EventTarget.

TextTrack.activeCues Read only

A TextTrackCueList object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.

TextTrack.cues Read only

A TextTrackCueList which contains all of the track's cues.

TextTrack.id Read only

A string which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (""). If the TextTrack is associated with a <track> element, then the track's ID matches the element's ID.

TextTrack.inBandMetadataTrackDispatchType Read only

Returns a string which indicates the track's in-band metadata track dispatch type.

TextTrack.kind Read only

Returns a string indicating what kind of text track the TextTrack describes. It must be one of the permitted values.

TextTrack.label Read only

A human-readable string which contains the text track's label, if one is present; otherwise, this is an empty string (""), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.

TextTrack.language Read only

A string specifying the language in which the text track's contents is written. The value must be a valid BCP 47 language tag, for example "en-US" for United States English or "pt-BR" for Brazilian Portuguese.

TextTrack.mode

A string specifying the track's current mode, which must be one of the permitted values. Changing this property's value changes the track's current mode to match. The default is disabled, unless the <track> element's default boolean attribute is set to true — in which case the default mode is showing.

sourceBuffer Read only

The SourceBuffer that created the track. Returns null if the track was not created by a SourceBuffer or the SourceBuffer has been removed from the MediaSource.sourceBuffers attribute of its parent media source.

Instance methods

This interface also inherits methods from EventTarget.

Note: The TextTrackCue interface is an abstract class used as the parent for other cue interfaces such as VTTCue. Therefore, when adding or removing a cue you will be passing in one of the cue types that inherit from TextTrackCue.

TextTrack.addCue()

Adds a cue (specified as a TextTrackCue object) to the track's list of cues.

TextTrack.removeCue()

Removes a cue (specified as a TextTrackCue object) from the track's list of cues.

Events

cuechange

Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited. Also available via the oncuechange property.

Example

The following example adds a new TextTrack to a video, then sets it to display using TextTrack.mode.

js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";

Specifications

Specification
HTML
# texttrack

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
TextTrack
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote
footnote Firefox versions before Firefox 50 didn't display captions when playing media without one or more video tracks being played.
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
activeCues
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote
footnote Starting in Firefox 69, cues are no longer incorrectly loaded when the TextTrack's mode is disabled; if that's the case, the returned list is empty.
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
addCue
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
cuechange event
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
cues
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote
footnote Starting in Firefox 69, cues are no longer incorrectly loaded when the TextTrack's mode is disabled; if that's the case, the returned list is empty.
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
id
Chrome – Full support
Chrome 33 (Release date: 2014-02-20)
footnote Full support
Edge – Full support
Edge 18 (Release date: 2018-10-02)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 20 (Release date: 2014-03-04)
footnote Full support
Safari – Full support
Safari 8 (Release date: 2014-10-16)
footnote Full support
Chrome Android – Full support
Chrome Android 33 (Release date: 2014-02-26)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 20 (Release date: 2014-03-06)
footnote Full support
Safari on iOS – Full support
Safari on iOS 8 (Release date: 2014-09-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 2 (Release date: 2014-10-17)
footnote Full support
WebView Android – Full support
WebView Android 4.4.3 (Release date: 2014-06-02)
footnote Full support
WebView on iOS – Full support
WebView on iOS 8 (Release date: 2014-09-17)
footnote Full support
inBandMetadataTrackDispatchType
Chrome – No support
Chrome
footnote
footnote See bug 41338648
Edge – No support
Edge 12 – 18 (Release date: 2015-07-29)
footnote Removed in 79 and later
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – No support
Opera
footnote
footnote See bug 41338648
Safari – Full support
Safari 8 (Release date: 2014-10-16)
footnote Full support
Chrome Android – No support
Chrome Android
footnote
footnote See bug 41338648
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – No support
Opera Android
footnote
footnote See bug 41338648
Safari on iOS – Full support
Safari on iOS 8 (Release date: 2014-09-17)
footnote Full support
Samsung Internet – No support
Samsung Internet
footnote
footnote See bug 41338648
WebView Android – No support
WebView Android
footnote
footnote See bug 41338648
WebView on iOS – Full support
WebView on iOS 8 (Release date: 2014-09-17)
footnote Full support
kind
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
label
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
language
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
mode
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote
footnote Before Firefox 52, using JavaScript to change the mode of a text track that's part of a media element would send one change event to the element's textTracks TextTrackList for each change, even if multiple changes are made in a single pass through the Firefox event loop. Starting in Firefox 52, these changes are reflected by a single event.
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
removeCue
Chrome – Full support
Chrome 23 (Release date: 2012-11-06)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 6 (Release date: 2012-07-25)
footnote Full support
Chrome Android – Full support
Chrome Android 25 (Release date: 2013-02-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 7 (Release date: 2013-09-18)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1.5 (Release date: 2013-09-25)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 7 (Release date: 2013-09-18)
footnote Full support
sourceBuffer
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – No support
Firefox
footnote No support
Opera – No support
Opera
footnote No support
Safari – Full support
Safari 8 (Release date: 2014-10-16)
footnote Full support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – Partial support
Safari on iOS 13 (Release date: 2019-09-19)
footnote Partial support
footnote Exposed in Mobile Safari on iPad but not on iPhone.
footnote See bug 200147
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – Partial support
WebView on iOS 13 (Release date: 2019-09-19)
footnote Partial support
footnote Exposed in Mobile Safari on iPad but not on iPhone.
footnote See bug 200147

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.

See also