Widely availableEssential whenever media includes spoken content or timed information that should remain available in text form.
Media Widely available

Text tracks

Text tracks add subtitles, captions, descriptions, and chapters to media through <track> and the TextTrack APIs. They are central to accessible video and audio experiences.

MediaCaptionsAccessibility

Overview

Text tracks add subtitles, captions, descriptions, and chapters to media through <track> and the TextTrack APIs. They are central to accessible video and audio experiences.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<track>
23
12
31
6
25
6
HTML attribute
default
23
12
31
6
25
6
kind
23
12
31
6
25
6
label
23
12
31
6
25
6
src
23
12
50
6
25
6
srclang
23
12
31
6
25
6
DOM API
addTextTrack

The addTextTrack() method of the HTMLMediaElement interface creates a new TextTrack object and adds it to the media element. It fires an TextTrackList/addtrack_event event on this media element's HTMLMediaElement/textTracks. This method can't be used on a TextTrackList interface, only an HTMLMediaElement.
23
12
31
6
25
6
textTracks

The read-only textTracks property on HTMLMediaElement objects returns a TextTrackList object listing all of the TextTrack objects representing the media element's text tracks, in the same order as in the list of text tracks.
23
12
31
6
25
6
HTMLTrackElement

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.
23
12
31
6
25
6
cuechange_event

The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.
32
14
68
10
32
10
default

The default property of the HTMLTrackElement interface represents whether the track will be enabled if the user's preferences do not indicate that another track would be more appropriate. It reflects the track element's boolean default attribute, returning true if present and false otherwise.
23
12
31
6
25
6
kind

The kind property of the HTMLTrackElement interface represents the type of track, or how the text track is meant to be used. It reflects the track element's enumerated kind attribute.
23
12
31
6
25
6
label

The label property of the HTMLTrackElement represents the user-readable title displayed when listing subtitle, caption, and audio descriptions for a track. It reflects the track element's label attribute.
23
12
31
6
25
6
readyState

The readyState read-only property of the HTMLTrackElement interface returns a number representing the track element's text track readiness state:
23
12
31
6
25
6
src

The src property of the HTMLTrackElement interface reflects the value of the track element's src attribute, which indicates the URL of the text track's data.
23
12
31
6
25
6
srclang

The srclang property of the HTMLTrackElement interface reflects the value of the track element's srclang attribute or the empty string if not defined.
23
12
31
6
25
6
track

The track read-only property of the HTMLTrackElement interface returns a TextTrack object corresponding to the text track of the track element.
23
12
31
6
25
6
TextTrack

The TextTrack interface of the WebVTT API represents a text track associated with a media element.
23
12
31
6
25
7
activeCues

The activeCues read-only property of the TextTrack interface returns a TextTrackCueList object listing the currently active cues.
23
12
31
6
25
7
addCue

The addCue() method of the TextTrack interface adds a new cue to the list of cues.
23
12
31
6
25
7
cuechange_event

The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.
23
12
31
6
25
7
cues

The cues read-only property of the TextTrack interface returns a TextTrackCueList object containing all of the track's cues.
23
12
31
6
25
7
id

The id read-only property of the TextTrack interface returns the ID of the track if it has one.
33
18
31
8
33
8
inBandMetadataTrackDispatchType

The inBandMetadataTrackDispatchType read-only property of the TextTrack interface returns the text track's in-band metadata dispatch type of the text track represented by the TextTrack object.
12
31
8
8
kind

The kind read-only property of the TextTrack interface returns the kind of text track this object represents. This decides how the track will be handled by a user agent.
23
12
31
6
25
7
label

The label read-only property of the TextTrack interface returns a human-readable label for the text track, if it is available.
23
12
31
6
25
7
language

The language read-only property of the TextTrack interface returns the language of the text track.
23
12
31
6
25
7
mode

The TextTrack interface's mode property is a string specifying and controlling the text track's mode: disabled, hidden, or showing. You can read this value to determine the current mode, and you can change this value to switch modes.
23
12
31
6
25
7
removeCue

The removeCue() method of the TextTrack interface removes a cue from the list of cues.
23
12
31
6
25
7
TextTrackCue

The TextTrackCue interface of the WebVTT API is the abstract base class for the various derived cue types, such as VTTCue and DataCue; you will work with these derived types rather than the base class.
23
12
31
6
25
7
endTime

The endTime property of the TextTrackCue interface returns and sets the end time of the cue.
23
12
31
6
25
7
enter_event

The enter event fires when a cue becomes active. In the case of subtitles or a caption this is when it displays over the media.
23
12
31
6
25
7
exit_event

The exit event fires when a cue stops being active.
23
12
31
6
25
7
id

The id property of the TextTrackCue interface returns and sets the identifier for this cue.
23
12
31
6
25
7
pauseOnExit

The pauseOnExit property of the TextTrackCue interface returns or sets the flag indicating whether playback of the media should pause when the end of the range to which this cue applies is reached.
23
12
31
6
25
7
startTime

The startTime property of the TextTrackCue interface returns and sets the start time of the cue.
23
12
31
6
25
7
track

The track read-only property of the TextTrackCue interface returns the TextTrack object that this cue belongs to.
23
12
31
6
25
7
TextTrackCueList

The TextTrackCueList interface of the WebVTT API is an array-like object that represents a dynamically updating list of TextTrackCue objects.
23
12
31
6
25
6
getCueById

The getCueById() method of the TextTrackCueList interface returns the first VTTCue in the list represented by the TextTrackCueList object whose identifier matches the value of id.
23
12
31
6
25
6
length

The length read-only property of the TextTrackCueList interface returns the number of cues in the list.
23
12
31
6
25
6
TextTrackList

The TextTrackList interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate TextTrack object in the list.
23
12
31
6
25
7
addtrack_event

The addtrack event is fired when a track is added to a TextTrackList.
23
12
31
6
25
7
change_event

The change event is fired when a text track is made active or inactive, or a TextTrackList is otherwise changed.
33
18
31
7
33
7
getTrackById

The TextTrackList method getTrackById() returns the first TextTrack object from the track list whose id matches the specified string. This lets you find a specified track if you know its ID string.
33
18
31
8
33
8
length

The read-only TextTrackList property length returns the number of entries in the TextTrackList, each of which is a TextTrack representing one track in the media element.
23
12
31
6
25
7
removetrack_event

The removetrack event is fired when a track is removed from a TextTrackList.
33
18
31
7
33
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Doesn't work for fullscreen video.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (50)
Implementation note
  • Before Firefox 50, setting the `src` didn't work, though it didn't raise an error.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (26)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: webkit (26)
Notes 1 item(s)
Implementation note
  • Before Firefox 50, text tracks would only load if the `<track>` element is in a document.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (32)
Implementation note
  • The `oncuechange` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (10)
Implementation note
  • The `oncuechange` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (32)
Implementation note
  • The `oncuechange` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (10)
Implementation note
  • The `oncuechange` event handler property is not supported.
Notes 1 item(s)
Implementation note
  • Before Firefox 50, setting the `src` property did not work properly.
Notes 1 item(s)
Implementation note
  • Firefox versions before Firefox 50 didn't display captions when playing media without one or more video tracks being played.
Notes 1 item(s)
Implementation note
  • 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.
Notes 1 item(s)
Implementation note
  • 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.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)
Notes 1 item(s)
Implementation note
  • 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.

Syntax

HTML 
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subs-ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Live demo

Caption-ready video

Attach a track element to a video so captions can be offered when a file is available.

PreviewFullscreen

Track kinds overview

Summarize common track kinds such as captions, subtitles, and descriptions.

PreviewFullscreen

Multilingual track plan

Show how multiple track elements can support more than one language.

PreviewFullscreen

Use cases

  • Captions and subtitles

    Provide spoken dialogue and sound context in text for video playback.

  • Chapters and descriptions

    Support navigation and additional context in longer or more structured media experiences.

Cautions

  • Text tracks require maintenance and localization effort, so plan them as first-class content rather than an afterthought.
  • Auto-generated captions may still need review before they are accurate enough for production use.

Accessibility

  • Captions and related text tracks are a core accessibility requirement for many media experiences, not an optional enhancement.

Related links

Powered by web-features