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);
We can hide the controls by not adding the controls attribute to the video element. Even without controls attribute on the elements the user can view the controls section by right-clicking on the video and enabling the show controls .
Turn captions on or off Go to the watch page of any video. Tap the video player once to show options, then, tap to turn on Captions. To turn off Captions, tap again.
To customize an HTML5 video player means to change the default look or styling to your taste. This is done by writing a new style sheet for the DOM element that renders a selected video player.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With