Popcorn popcorn.js on/off button for subtitles/captions

Question

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.

Answer 1

Popcorn has enable and disable methods that can turn any given plugin on and off.

Because you defined your popcorn instance inside the event listener function, you'll want to set up the click handler in there as well. So, for your html...

<input type="button" value="Captions" id="captions" class="button"/>

And your script...

document.addEventListener( "DOMContentLoaded", function() {

    var popcorn = Popcorn( "#video" );
    var showSubtitles = true;
    document.getElementById('captions').addEventListener('click', function () {
        //toggle subtitles
        showSubtitles = !showSubtitles;
        if (showSubtitles) {
            popcorn.enable('subtitle');
        } else {
            popcorn.disable('subtitle');
        }
    }, false);

    /* fill in your subtitles here... */
}, false );

Official documentation here: http://popcornjs.org/popcorn-docs/media-methods/#disable