logo

How to programmatically enable or disable text tracks

This article describes how you can use the API to enable or disable subtitles, closed captions or metadata.

The TextTracks API can be used to implement this functionality. Implementing this functionality is a common use-case for developers who want to build their own UI to toggle subtitles.

Table of Contents

SDKs

Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes Yes Yes Yes Yes Yes

Code examples

The code examples below how to implement toggling subtitles across SDK. It's advised to disable text tracks you don't want to display, in order to avoid issues with overlapping text.

Web SDK
// disable all text tracks
player.textTracks.forEach(function(track) {
    track.mode = "disabled";
});
// enable a specific text track
player.textTracks[indexOfRequestedTextTrack].mode = "showing";
Android (TV) SDK
// disable all text tracks
for (int i = 0; i < tpv.getPlayer().getTextTracks().length(); i++) {
    theoplayer.getPlayer().getTextTracks().getItem(i).setMode(TextTrackMode.DISABLED);
}
// enable a specific text track
theoplayer.getPlayer().getTextTracks().getItem(indexOfRequestedTextTrack).setMode(TextTrackMode.SHOWING);
iOS (/tvOS) SDK
// disable all text tracks
for i in 0..<self.player.textTracks.count {
    var track = self.player.textTracks.get(i)
    track.mode = TextTrackMode.disabled
}
// enable a specific text track
var track = self.player.textTracks.get(indexOfRequestedTextTrack)
track.mode = TextTrackMode.showing

Remarks

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
San Francisco
Singapore
Barcelona