CODEWITHSUNDEEP
jqueryhtmlvideo
Dan Papetti
Dan Papetti

Reputation: 33

HTML5 Video Closed Captioning turn off or on methods

In HTML5 video, how I can call a function when the video's closed captioning gets turned on or off?

I basically just want to set a jQuery cookie whenever Closed Captioning gets turned off or on, so that videos on other pages can be defaulted to whatever the user chose earlier.

I know how to do all that, I just need to be able to call a function whenever closed captioning gets turned on or off by the user. It's got to be something similar to onvolumechange or onpause etc., I just can't seem to locate what it is. Thanks.

Upvotes: 1

Views: 2940

Answers (1)

Offbeatmammal
Offbeatmammal

Reputation: 8228

Update: Ignore my previous answer (left below in case there is any use for the logic involved)... turns out there is an event that shows when the caption track is changed:

<video id="video" controls="controls" muted preload="metadata">
  <source src="BigBuck.m4v" type="video/mp4" />
  <track src="entrack.vtt" label="English Captions" kind="subtitles" srclang="en-us" >
</video>

<script type="text/javascript">

function captionStatus() {
    console.log("Mode:-->" + track.mode)
}

var video = document.querySelector('#video');
var tracks = video.textTracks; // one for each track element
var track = video.textTracks[0]; // corresponds to the first track element. If more than one will need to adapt code to select the right one

tracks.addEventListener("change", captionStatus, false);
</script>

[Original, not very helpful, answer)

there doesn't seem to be an event that you can add a listener for tied specifically to the CC button however, what you could do is set a timer (or use an event tied to the playhead on the video) that checks the textTrack.mode for the video element and uses that:

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; // one for each track element
var textTrack = textTracks[0]; // corresponds to the first track element
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode // e.g. "disabled", hidden" or "showing"

...

video.addEventListener('timeupdate',function(){
    // action based on video.textTracks[0].mode;
},false);

Upvotes: 9

Related Questions