The read-onlytextTracksproperty onHTMLMediaElement objects returns aTextTrackList object listing all of theTextTrackobjects representing the media element's text tracks, in the same order as inthe list of text tracks.

You can detect when tracks are added to and removed from an<audio> or<video> elementusing theaddtrack andremovetrack events. However, theseevents aren't sent directly to the media element itself. Instead, they're sent to thetrack list object of theHTMLMediaElementthat corresponds to the type of track that was added to the element

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

SeeTextTrackList events to learnmore about watching for changes to a media element's track list.

Value

ATextTrackList object representing the list of text tracks included in the media element. The list of tracks can be accessed usingtextTracks[n] to get the n-th text track from the object's list of text tracks, or using thetextTracks.getTrackById()method.

Each track is represented by aTextTrack object which providesinformation about the track.

Examples

We start with a<video> that hasseveral<track>children

<video controls>  <source src="/shared-assets/videos/sintel-short.webm" type="video/webm" />  <source src="/shared-assets/videos/sintel-short.mp4" type="video/mp4" />  <track    kind="subtitles"    src="/shared-assets/misc/sintel-en.vtt"    srclang="en"    label="English" />  <track    kind="subtitles"    src="/shared-assets/misc/sintel-de.vtt"    srclang="de"    label="Deutsch" />  <track    kind="subtitles"    src="/shared-assets/misc/sintel-es.vtt"    srclang="es"    label="Español" /></video>

TheHTMLMediaElement.textTracks returns aTextTrackList through which we can iterate. Here we set all three tracks to show simultaneously.

const tracks = document.querySelector("video").textTracks;for (const track of tracks) {  track.mode = "showing";}

Specifications

Browser compatibility

See also

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