3

I am attempting to build a standard HTML5 video player that supports closed captioning through the <track> element and WebVTT. My goal for this player is to not have to build a custom control UI, but rather rely on the default controls provided by the browser/device.

In order to comply with FCC regulations regarding closed captioning, I am also building a menu with caption formatting options - color, size, opacity, etc. One of the options I would like to include is a toggle for captions off and on, which will be especially useful in a browser like Firefox where the CC button does not exist in the default controls.

I have everything working properly, except for one issue I can not seem to figure out. While using my custom toggle to turn on or off captions, the CC button on the default video controls will also toggle; however, I cannot get this to work the opposite way.

I am looking for some sort of event that gets triggered when the default CC button is pressed so that I can check the showing/hidden/disabled mode of the video textTracks and then update my custom toggle accordingly. Does such an event exist? Is there any way to remove just the CC button from the default controls while leaving the rest? I would hate to have to build a completely custom UI for the player just for this one issue.

Edit 1: Here is a jsFiddle for an example.

http://jsfiddle.net/6z5e37h6/

<div class="htmlVid">
 <video width="640" height="360" controls="controls" id="vid">
  <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></source>
 </video>
</div>
<label>Captions:</label>
<input onclick="capToggle('off');" type="radio" name="captions" checked="checked" />Off
<input onclick="capToggle('on');" type="radio" name="captions" />On

<script>
 var vid = document.getElementById('vid');
 var track = vid.addTextTrack('subtitles', 'test', 'en');
 var capToggle = function (val) {
  if (val == 'on') {
   track.mode = 'showing';
  } else {
   track.mode = 'hidden';
  }
 }
</script>

As you can see (viewing on Chrome) if you select the captions "on" radio button, the captions will turn on and the default CC button on the default controls will activate (turn opaque). What I am looking for is some way to know that a user clicked the default CC button so that I can automatically update the radio button to reflect the current state.

I would rather not have a regular interval constantly running to check this state, especially with all the other scripts I plan to have running. I know there is an "oncuechange" event for when a new caption shows up, but I was wondering if there was a better way to check right away, rather than have to wait a few seconds potentially to update the value.

glennsl
  • 28,186
  • 12
  • 57
  • 75
Gspan
  • 41
  • 4
  • If you had a jsFiddle it might be easier to assist you. I know you can turn off all the controls but that wouldn't be ideal. Is there a programmic way to check if captions are on (via a variable)? If so, I guess you can check for this at a regular interval (even 2-3 seconds), and then chg the button state accordingly. This might help too: https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Captioned_video_example – Ben A. Hilleli Jan 23 '15 at 22:24

0 Answers0