with popcornjs, how to play video and show footnotes in one click?

Question

I have a navigation (menu) bar with 10 videos and i want each video with its footnote shows up in one click. Now, with one click, each video comes up but i don't know how to handle different footnotes?

here is my html:

    <div id="menu">
    <uL>
    <li>Choose a Country:</li>
    <li><a href="javascript:changeSource1();">US</a></li> 
    <li><a href="javascript:changeSource2();">Canada</a></li> 
    </ul>
    </div>

    <div id="content">
    <div class="video-player">
    <video id="videos" controls>
    <source id="mp4" src="Video/(name of the video).mp4" type="video/mp4" />
    <source id="ogv" src="Video/(name of the video).ogv" type="video/ogg" />
    </video>

     </div> 

    <div id="video-text">
    <p id="popcorn-text">Ipsum Lorem...Aenean consectetur ornare pharetra. Praesent et urna eu justo convallis sollicitudin. Nulla porttitor mi euismod neque vulputate sodales. </p>
     </div>

     </div>  

and here is my POPCORNJS code which works only for video:

    <script>
    function changeSource1()
    { 
    document.getElementById("mp4").src=  "Video/(name of the video).mp4";
    document.getElementById("ogv").src=  "Video/(name of the video).ogv";
    document.getElementById("videos").load();
    } 
    </script>

how can I have multi-function with popcornjs code (like showing different footnotes for each video)? thanks, N

Answer 1

You can have as many Popcorn instances as you want, so here it makes sense to have one for each video. And each instance of Popcorn will have its own set of footnotes.We'll start with an array, and set up each video dynamically.

var data = [
    {
        src: {
            mp4: 'video1.mp4', webm: 'video1.webm', ogg: 'video1.ogv'
        },
        footnotes: [
            {
                start: 2,
                end: 4,
                text: 'Ipsum Lorem...'
            }
            // etc.
        ]
    }
    // etc.
];

Now, set up the popcorn instances, load up the data, and add a click event handler for switching.

var activeVideo = data[0];

//Popcorn provides this handy 'forEach' helper
Popcorn.forEach(data, function(vid, i) {
    var button;
    vid.video = document.createElement('video');
    Popcorn.forEach(vid.src, function(src, type) {
        var source = document.createElement('source');
        source.setAttribute('src', src);
        source.setAttribute('type', 'video/' + type);
        vid.video.appendChild(source);
    });
    vid.video.preload = true; //optional
    document.getElementById('').appendChild(vid.video);
    if (i) {
        vid.video.style.display = 'none';
    }

    vid.popcorn = Popcorn(vid.video);

    //every footnote needs a target
    vid.popcorn.defaults('inception', {
        target: 'video-text'
    });

    Popcorn.forEach(vid.footnotes, function(footnote) {
        vid.popcorn.footnote(footnote);
    });

    button = document.getElementById('button' + i); // or create one here
    button.addEventListener('click', function() {
        //pause and hide the old one
        activeVideo.popcorn.pause();
        activeVideo.style.display = 'none';

        activeVideo = data[i];
        activeVideo.style.display = '';
        activeVideo.popcorn.play();
    });
});

That should just about do it.

One issue is that this won't work on an iPad, because Mobile Safari freaks out if you give it more than one video on a page. In that case, just create one video element, and in the click handler, set the src attribute (mp4 only) and call .load(). You can still have multiple Popcorn instances on the same video tag, but when you "deactivate" an instance, just call .disable('footnote') to keep it from showing the footnotes on the wrong video and run enable on the active one.