Toggling Closed Caption in HTML5 video and disabling default video controls

Question

I have two problems. As soon as I put the track tag within my video element the video's default controller shows up. I have custom controls so it's quite the problem.

Second. I can't find a way to toggle closed caption on an off.

HTML:

<video id="trailers" poster="images/poster/poster.jpg">
                <source src="media/vLast.mp4" type="video/mp4">
                <source src="media/vLast.webm" type="video/webm">
                <track id="mytrack" label="English Subtitles" src="subtitles.vtt" srclang="en" default />
 </video> 

 <button id="cc">CC</button>

JS:

  var cc = document.getElementById('cc');
function cc(){
       var video= document.getElementById('media');
       var track1 = video.textTracks[0];
       var mytrack = document.getElementById('mytrack');
       var track2 = mytrack.track;
       console.log(track1);
       console.log(track2);
    }
    cc.addEventListener('click',cc,false);

Csc

controls=false in your <video> tag should deal with the first (or handle it from script with a video.controls=false. For the second does video.textTracks.mode = n; solve the problem (1=hidden, 2=showing) .. I don't have a sample to hand so it's just half remembered theory (hence comment not answer) – Hyperesthesia

Answer 1

if you remove any reference to controls in your <video> tag that should keep the controls hidden (they may flash on first load, but once the video is loaded they will stay hidden) the controls item is boolean: if it exists then they will show, if it doesn't then they won't.

For showing and hiding the captions you need to set the mode to "showing" or "hidden" as below

<video autoplay loop id="v">
    <source src="Video.mp4" type="video/mp4">
    <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
    HTML5 video not supported
</video>
.
.
.  
<script>
.
v = document.getElementById("v")
v.textTracks[0].mode = "hidden";  // "showing" will make them reappear
    // if you want to show the controls
v.controls = true;
.
</script>

Be aware that YMMV as different browsers have different behavior when it comes to captions. This works on Chrome/Safari on OSX and IE10 (though note on Safari and IE the value of mode is "0" for hidden and "2" for showing, but using the text to set them seems to work. Have not tested on iOS

Hyperesthesia

i dont have any references to controls in the video tag. i tried setting controls to false but that didnt achieve anything – Csc

glad the text track worked. did you try programatically setting the controls to false? What OS/Browser combination? – Hyperesthesia

im using I did set it to false using an eventListener on load. So when the site loads it does show up for a few seconds but so far it's the only solution i've been able to find. You can see here: www3.carleton.ca/clubs/sissa/html5/video.html – Csc

yeah, looks like the controls default to "on" if there's a caption track until the source loads and the lack of controls gets registered. one thing you could do is have the video element hidden with just a manually controlled poster until the onload (or onCanPlay or similar depending on when you want to give control to the user) fires – Hyperesthesia

Answer 2

To disable the controls fromshowing up at all (for webkit browsers - chrome, safari, etc), you can also add the following css to avoid the "blink" effect with original controls.

::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}

Biographer