Skip to main content
Version: 11.7.0

How to programmatically detect text track changes on Web

This article describes how you can use the TextTrack API to detect text track changes. A text track "change" is triggered by enabling (or disabling) a subtitle or closed captions track.

Implementing this functionality is a common use-case for developers who want to build their own UI, and annotate the subtitle (or closed captions) track that is currently active.

Usage​

The implementation of the Web SDK applies to all web-based platforms, including Tizen and webOS.

The Web SDK exposes the TextTrack API through player.textTracks. This textTracks property is a TextTrackList that inherits from the TrackList. This TrackList dispatches the events from the TrackListEventMap. This TrackListEventMap contains the change event, as well as the addtrack and removetrack event.

The code below allows you to detect text track changes.

player.textTracks.addEventListener('change', function (event) {
  const track = event.track;
  const isEnabled = track.mode === 'showing';
  console.log(track, track.label, track.kind, track.type, isEnabled);
});

The properties of a text track (e.g. mode, kind) are described in the TextTrack API reference.

Are you reading this article because you are interested in subtitles and closed captions? Continue reading below.

Refer to how to track ID3 cues if you are interested in timed metadata (ID3, emsg, EventStream, EXT-X-DATERANGE, ...).

Are you reading this article because you are implementing a custom UI? Then you will find the following articles interesting: