I'm using popcorn.js to add some subtitles/captions to my video. These automatically are shown in the video. I'm currently creating custom video controls using html and JavaScript. I would like a button I created to toggle the captions on and off.
Here is my html button and video (currently the onclick function "Captions" is empty)
<input type="button" value="Captions" id="captions" onclick="Captions()" class="button"/>
<video id="video" width="896" height="504" data-setup="{}" >
<source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>Your browser doesn't support HTML5. Maybe you should upgrade.</p>
</video>
Here is some of my JavaScript using Popcorn
document.addEventListener( "DOMContentLoaded", function() {
var popcorn = Popcorn( "#video" );true;
popcorn.subtitle({
start: .5,
end: 2.5,
text: "Subtitle Text"
popcorn.subtitle({
start: 2.5,
end: 9.5,
text: "Or captions"
});
}, false );
I'm new to JavaScript so any help would be appreciated.
Update: how do I get it so the captions don't auto play. I'd like them to be off when the video starts playing.