video.js breaks popcorn.js on iPad

Question

So here's the challenge. Make a clickable popcorn link OVERLAYING the video. Simple enough on desktop, but iOS is proving to be a challenge. If the video element has the controls attribute iOS hijacks all clicks within the video window, making the link overlay un-clickable. However if the controls attribute is not present on the video element, the popcorn links are clickable and work well.

Problems is, now there are no video controls. And I need those. So I figured some hand written javascript based video controls should work out fine. No controls attribute on the video tag so popcorn overlays are clickable, plus working controls! My attempt with this is to use video.js.

So now I have video.js video controls and popcorn living in harmony on desktop. But on iPad the video.js part works, but the popcorn part doesn't anymore. I get the video.js controls, but no popcorn events fire. However there are NO ERRORS, and the script executes completely.

Does anyone know what is happening here? Why would video.js stop popcorn only on iOS? Is there a solution?

PROBLEM DEMO

Answer 1

VideoJS has to make changes to your web page to insert all its controls and get them positioned correctly, and that includes moving the video element around. Mobile Safari is notoriously sensitive and a little bit weird about this stuff. It looks like VideoJS is removing your original video element and replacing it with a new one, and this is happening after Popcorn has attached it self to the original.

Debugging minified Javascript on Mobile Safari is no picnic, so I can't tell exactly why VideoJS is doing this on the iPad and not other browsers. But using the console, it's possible to get a rough idea what's going on:

document.getElementsByTagName('video')[0] ===
    window.Popcorn.instances[0].media
//false!

That means the video element that Popcorn is listening to is not the same one that you're seeing and playing in your web page. From this command...

window.Popcorn.instances[0].media.parentNode //null!

...you can see that the original tag exists in memory but is not attached to the DOM. So while the new video plays along, the original one is stuck paused at 0:00.

The solution is to set up your Popcorn instance after VideoJS is done doing its business. And then make sure you reference the video element properly, because now '#popacorn' references a <div>, and the new video element is called "popacorn_html5_api". That should cover you for iOS as well as desktop browsers.

Answer 2

I had the same problem in Firefox. Popcorn not working with videoJS.

I solved my problem like this:

jQuery(function(){

    _V_('videoid').ready(function() { // videoJS ready ?
        console.info('videoJS ready : player ID = '+$(this).attr('id'));
        console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));

        var pop = Popcorn( "#"+$('#videoid video').attr('id') );
        // etc...

    });

});

Like said brianchirls, videoJS makes ​​a div id = "videoid" containing a video id = "videoid_html5_api", so the object id="videoid" is no longer a video object.