Baseline Widely available
The TextTrackList
interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate textTrack
object in the list.
Text tracks can be added to a media element declaratively using the <track>
element or programmatically using the HTMLMediaElement.addTextTrack()
method.
An instance of this object can be retrieved using the textTracks
property of an HTMLMediaElement
object.
For a given HTMLMediaElement
object media, the individual tracks can be accessed using:
media.TextTracks[n]
, to get the n-th text track from the object's list of text tracksmedia.textTracks.getTrackById()
methodThis interface also inherits properties from its parent interface, EventTarget
.
length
Read only
The number of tracks in the list.
This interface also inherits methods from its parent interface, EventTarget
.
getTrackById()
Returns the TextTrack
found within the TextTrackList
whose id
matches the specified string. If no match is found, null
is returned.
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.
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.
To get a media element's TextTrackList
, use its textTracks
property.
const 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 Browser compatibility
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4