CODEWITHSUNDEEP
javascriptjqueryhtml
a11y_guru
a11y_guru

Reputation: 230

HTML5 video: how to turn off subtitles

I'm creating an HTML5 video player, and want a button that turns subtitles on and off. To switch them off, I'm setting the default track's "mode" attribute to "hidden", but they're not disappearing in Chrome 66.

Here's the line of jQuery that should turn subtitles off (the player's id is "player"):

$"#player track").eq(0).attr("mode", "hidden");

The "mode" attribute changes to "hidden" in the DOM, but the subtitles are still visible. Any idea why that would be?

Upvotes: 0

Views: 4046

Answers (2)

Ahmad Alwisi
Ahmad Alwisi

Reputation: 1

$(".ccbutton").click(function(){

var video = document.querySelector('#video');

for (var i = 0; i < video.textTracks.length; i++) {
   if(video.textTracks[i].mode == 'hidden')
          video.textTracks[i].mode = 'showing';
   else
          video.textTracks[i].mode = 'hidden';
}

});

Upvotes: 0

Adrian
Adrian

Reputation: 8607

Expanding upon my comment; what you should try is disable the subtitles on all tracks (in case you have more than one). There might be an easier way using jQuery, however I have never worked with html5 player using jQuery hence my answer.

var video = document.querySelector('#player');

for (var i = 0; i < video.textTracks.length; i++) {
   video.textTracks[i].mode = 'hidden';
}

Upvotes: 2

Related Questions