TextTrack interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular
This interface also inherits properties from
TextTrackCueListobject 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.
TextTrackCueListwhich contains all of the track's cues.
DOMStringwhich identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (
""). If the
TextTrackis associated with a
<track>element, then the track's ID matches the element's ID.
DOMStringwhich indicates the track's in-band metadata track dispatch type.
DOMStringindicating what kind of text track the
TextTrackdescribes. It must be one of the permitted values.
DOMStringwhich 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.
DOMStringwhich specifies the text language in which the text track's contents is written. The value must adhere to the format specified in the Tags for Identifying Languages (BCP 47) document from the IETF, just like the HTML
langattribute. For example, this can be
"en-US"for United States English or
"pt-BR"for Brazilian Portuguese.
DOMStringspecifying 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
defaultBoolean attribute is specified, in which case the default mode is
This interface also inherits methods from
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
The following example adds a new
TextTrack to a video, then sets it to display using
let video = document.querySelector('video'); let track = video.addTextTrack("captions", "Captions", "en"); track.mode = "showing";
|HTML Standard (HTML)|
BCD tables only load in the browser