Brightcove video player does not work within Jquery Mobile

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 me开发者_如何转开发ssage. "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?

---

Nothing new.

go directly to http://www.lawruk.com/test/1.htm and see it working

The problem is that the code for the player depends on DOMready event while jQueryMobile fetches the page via AJAX and displays. That's why:

• nothing except the page div will load, so no js files from head work
• there's no DOMready

I see you got the first thing solved by putting the <script src=... in the body, but still - no DOMready. You'll have to change the external script or find the way to call it yourself. Then you start it with a handler to pageshow event

Or you can just use rel="external" in your links to the pages with movies

---

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

---

You are missing some code. Go to this page and see how BC set up their video player:

http://link.brightcove.com/services/player/bcpid1756040682001?bckey=AQ~~,AAABmA9XpXk~,-Kp7jNgisreGYAiU1ViDA175Evu7Kw9s&bctid=1754261492001

I believe that the snippet below is a part of their suggested usage, that may help...

<div style="display:none">
</div>

Here's the parent page for the example above just in case you want that: http://support.brightcove.com/en/video-cloud/docs/player-templates#mobileVideoPlayer