12

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);
Batman
  • 5,563
  • 18
  • 79
  • 155
  • controls=false in your – Offbeatmammal Feb 17 '13 at 02:20

2 Answers2

16

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

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52
  • i dont have any references to controls in the video tag. i tried setting controls to false but that didnt achieve anything – Batman Feb 17 '13 at 04:33
  • glad the text track worked. did you try programatically setting the controls to false? What OS/Browser combination? – Offbeatmammal Feb 17 '13 at 05:10
  • 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: http://www3.carleton.ca/clubs/sissa/html5/video.html – Batman Feb 17 '13 at 05:42
  • 2
    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 – Offbeatmammal Feb 17 '13 at 05:47
0

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;
}
Hawkeye64
  • 627
  • 1
  • 7
  • 17