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);

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

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;
}