Question

I cannot get the Brightcove video player to work on Web pages using the Jquery Mobile framework. I set up a few simple test pages to illustrate the problem:

http://www.lawruk.com/test/brightcove-jquery-mobile.htm

When you click on the Video 1 and Video 2 links, the video player is not displayed MOST of the time. Sometimes the video loads, which makes me think it is a JavaScript timing issue.

The video player does work on the video pages individually.

http://www.lawruk.com/test/1.htm

http://www.lawruk.com/test/2.htm

In Firebug I noticed the tag representing the video is present in the DOM but grayed out. I am using Firefox to test this.

When I test this using Safari from an ITouch, the video player appears, but displays an error message. “The video you are trying to watch is currently unavailable. Please check back soon.”

I’m not really sure if this is a Jquery Mobile limitation or if the Brightcove JavaScript does not play well with Jquery Mobile.

Any clever workarounds?

Answer 1

As naugtur mentioned, the BrightCove script listens for a “load” or “DOMContentLoaded” event to be fired, which then calls the method createExperiencesPostLoad(). Jquery Mobile loads new pages via Ajax, so a load event like this is not going to fire during a page transition. Jquery Mobile fortunately provides us with a “pageshow” event that fires after a page transition completes, so we can call the createExperiencesPostLoad() method after a “pageshow” event.

<script language="JavaScript" type="text/javascript">
    $('div').live('pageshow', function(event) {
        if ($('#my-video-player-container').is(':visible')) {
            brightcove.createExperiencesPostLoad();
        }
    }); 
</script>

Please note that in this example, the player is contained within a div with the id “my-video-player-container”. I am checking that it is visible before calling the method. You will have to change this to suit your code. This method could potentially get called twice, but better twice than never.

Link to a working version:http://www.lawruk.com/test/brightcove-jquery-mobile-fix.htm