Question

134

Toggling Closed Caption in HTML5 video and disabling default video controls

rated 0 times [ 138] [ 4] / answers: 1 / hits: 20292 / 12 Years ago, sun, february 17, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carlymykalac

Add To Favorites

Follow

Total Points: 740

Total Questions: 91

Total Answers: 91

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 12 Years ago kaceyr · Accepted Answer

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