API
Text Tracks
An overview of using and configuring text tracks (captions/subtitles).
Loading
Section titled LoadingThe Loading Text Tracks guide covers how to initialize tracks and supported formats/kinds.
Tracks List
Section titled Tracks ListThe read-only textTracks
property on the player returns a TextTrackList
object that
contains TextTrack
objects. Keep in mind the mentioned objects are custom implementations and
not the browser’s native classes.
The returned list is live; that is, as tracks are added to and removed from the player, the list’s contents change dynamically. Once you have a reference to the list, you can monitor it for changes to detect when new tracks are added or existing ones are removed by listening to list events.
List Events
Section titled List EventsThe TextTrackList
object is an EventTarget
which dispatches the following events:
add
: Fired when a text track has been added to the list.remove
: Fired when a text track has been removed from the list.mode-change
: Fired when the mode of any text track has changed.
Managing Tracks
Section titled Managing TracksAdd Tracks
Section titled Add TracksText tracks can be dynamically added and removed like so:
You can also create tracks and add them programtically like so:
Remove Tracks
Section titled Remove TracksText tracks can be removed programtically like so:
All text tracks can be removed by calling clear()
:
Track Mode
Section titled Track ModeThe mode
property of a text track accepts the following values:
showing
: Track will load, receive cue updates, and is visible on-screen.hidden
: Track will load, receive cue updates, but is not visible on-screen.disabled
: Track will not load and it will not receive cue updates.
Only one track per kind can have a mode of showing
. Other tracks of the same kind that are
specifically showing will have their mode set to disabled
on change.
Track Events
Section titled Track EventsThe TextTrack
object is an EventTarget
which dispatches the following events:
load-start
: Fired when the track begins loading.load
: Fired when the track has finished loading and parsing.error
: Fired when there is a critical error loading or parsing the track.add-cue
: Fired when a new cue has been added.remove-cue
: Fired when a cue has been removed.cue-change
: Fired when the active cues has changed.mode-change
: Fired when the mode has been changed.
Media State
Section titled Media StateThe following text track related properties are available on the media store:
textTracks
: An array containing the current list of TextTrack objects.textTrack
: The current captions/subtitles TextTrack object or null if none is showing.
If you’re using React check out the useCaptionOptions
hook for building menus.
Remote Control
Section titled Remote ControlThe changeTextTrack
method on the media remote can be used to dispatch
media-text-track-change-request
request events to update the current audio track like so:
Media Events
Section titled Media EventsThe following text track related events are available on the player: