Web/API/HTMLMediaElement/textTracks

Draft This page is not complete.

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.

You can detect when tracks are added to and removed from an <audio> or <video> element using the addtrack and removetrack events. However, these events aren't sent directly to the media element itself. Instead, they're sent to the track list object of the HTMLMediaElement that corresponds to the type of track that was added to the element

The returned list is live; that is, as tracks are added to and removed from the media element, the list's contents change dynamically. Once you have a reference to the list, you can monitor it for changes to detect when new text tracks are added or existing ones removed.

Syntax

var textTracks = mediaElement.textTracks;

Value

A TextTrackList object representing the list of text tracks included in the media element. The list of tracks can be accessed using array notation, or using the object's getTrackById() method.

Each track is represented by a TextTrack object which provides information about the track.

Examples

We start with a <video> that has several <track> children

<video controls poster="/images/sample.gif"> 
  <source src="sample.mp4" type="video/mp4"> 
  <source src="sample.ogv" type="video/ogv"> 
  <track kind="captions" src="sampleCaptions.vtt" srclang="en"> 
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"> 
  <track kind="chapters" src="sampleChapters.vtt" srclang="en"> 
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> 
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> 
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> 
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> 
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1"> 
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2"> 
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3"> 
</video>

The HTMLMediaElement.textTracks returns a textTracksList thru which we can iterate. Here we print all the properties of each English track to the console.

var tracks = document.querySelector('video').textTracks; 

for (var i = 0, L = tracks.length; i < L; i++) { /* tracks.length == 10 */
   if (tracks[i].language == 'en') {
      console.dir(tracks[i]);
   }
}

Properties & Methods

properties

length: Returns the number of text tracks in TextTrackList object.

methods

getTrackById(): The getTrackById(id) method returns the first TextTrack in the TextTrackList object that matches the id, or null if there is no match.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLMediaElement.textTracks' in that specification.	Living Standard	No change from HTML5
HTML5The definition of 'HTMLMediaElement.textTracks' 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
`textTracks`	Chrome Full support 23	Edge Full support 12	Firefox Full support 31	IE Full support 10	Opera Full support ≤12.1	Safari Full support 6	WebView Android Full support ≤37	Chrome Android Full support 25	Firefox Android Full support 31	Opera Android Full support ≤12.1	Safari iOS Full support 6	Samsung Internet Android Full support 1.0

Legend

Full support: Full support