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 the
onaddtrack
property. change
- Fired when a text track has been made active or inactive. Also available via the
onchange
property. removetrack
- Fired when a new text track has been removed from the media element. Also available via the
onremovetrack
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 StandardThe definition of 'TexTrackList' in that specification. | Living Standard |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
No support No |
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
- No support
- No support
- Compatibility unknown
- Compatibility unknown
TextTrackList by Mozilla Contributors is licensed under CC-BY-SA 2.5.