HTMLMediaElement: textTracks property
=====================================

 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.

 See TextTrackList events to learn
 more about watching for changes to a media element's track list.

Value
-----

 A `TextTrackList` object representing the list of text tracks included in the media element. The list of tracks can be accessed using `textTracks[n]` to get the n-th text track from the object's list of text tracks, or using the `textTracks`.`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


```html
<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` through which we can iterate. Here we print all the properties
 of each English track to the console.


```js
const tracks = document.querySelector("video").textTracks;

for (const track of tracks) {
  if (track.language === "en") {
    console.dir(track);
  }
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-media-texttracks-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLMediaElement`: Interface used to define the `HTMLMediaElement.textTracks` property
* `<audio>`, `<video>`
* `AudioTrack`, `AudioTrackList`
* `VideoTrack`, `VideoTrackList`
* `addtrack`,
 `change`,
 `removetrack`: AudioTrackList events
* `addtrack`,
 `change`,
 `removetrack`: VideoTrackList events