The TextTrackList
interface is used to represent a list of the text tracks defined by the <track>
element, with each track represented by a separate textTrack
object in the list.
Retrieve an instance of this object with HTMLMediaElement.textTracks
. The individual tracks can be accessed using array syntax or functions such as forEach()
for example.
Properties
This interface also inherits properties from its parent interface, EventTarget
.
length
Read only- The number of tracks in the list.
Event handlers
onaddtrack
- An event handler to be called when the
addtrack
event is fired, indicating that a new text track has been added to the media element. onchange
- An event handler to be called when the
change
event occurs. onremovetrack
- An event handler to call when the
removetrack
event is sent, indicating that a text track has been removed from the media element.
Methods
This interface also inherits methods from its parent interface, EventTarget
.
getTrackById()
- Returns the
TextTrack
found within theTextTrackList
whoseid
matches the specified string. If no match is found,null
is returned.
Events
addtrack
- Fired when a new text track has been added to the media element.
Also available via theonaddtrack
property. change
- Fired when a text track has been made active or inactive.
Also available via theonchange
property. removetrack
- Fired when a new text track has been removed from the media element.
Also available via theonremovetrack
property.
Usage notes
In addition to being able to obtain direct access to the text tracks present on a media element, TextTrackList
lets you set event handlers on the addtrack
and removetrack
events, so that you can detect when tracks are added to or removed from the media element's stream. See onaddtrack
and onremovetrack
for details and examples.
Examples
Getting a video element's text track list
To get a media element's TextTrackList
, use its textTracks
property.
var textTracks = document.querySelector("video").textTracks;
Monitoring track count changes
In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the addtrack
and removetrack
events are set up.
textTracks.onaddtrack = updateTrackCount; textTracks.onremovetrack = updateTrackCount; function updateTrackCount(event) { trackCount = textTracks.length; drawTrackCountIndicator(trackCount); }
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'TexTrackList' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
TextTrackList | Chrome Full support Yes | Edge Full support ≤18 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
addTrack event | Chrome Full support Yes | Edge Full support ≤79 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
change event | Chrome Full support Yes | Edge Full support ≤79 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
getTrackById | Chrome Full support Yes | Edge Full support 18 | Firefox Full support Yes | IE ? | Opera ? | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
length | Chrome Full support 44 | Edge Full support ≤18 | Firefox Full support Yes | IE ? | Opera Full support 31 | Safari Full support 10 | WebView Android Full support 44 | Chrome Android Full support 44 | Firefox Android ? | Opera Android Full support 32 | Safari iOS ? | Samsung Internet Android Full support 4.0 |
removeTrack event | Chrome Full support Yes | Edge Full support ≤79 | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown