Brightcove視頻播放器無法在Jquery Mobile中工作

我無法使用Jquery Mobile框架讓Brightcove視頻播放器在網頁上工作。我設置了一些簡單的測試頁面來說明這個問題：Brightcove視頻播放器無法在Jquery Mobile中工作

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

當你點擊視頻1和視頻2鏈接，視頻播放器不顯示的大部分時間。有時會加載視頻，這讓我認爲這是一個JavaScript時間問題。

視頻播放器可以單獨在視頻頁面上工作。

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

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

在Firebug中，我注意到代表視頻的標籤出現在DOM，但變灰。我使用Firefox來測試這個。

當我使用ITouch測試Safari時，會出現視頻播放器，但會顯示錯誤消息。「您正在嘗試觀看的視頻目前無法使用，請稍後再回來查看。」

我不確定這是Jquery Mobile的限制還是Brightcove JavaScript與Jquery Mobile的不兼容。

任何聰明的解決方法？

來源

2011-06-09 James Lawruk

如前所述naugtur頁面中，Brightcove的腳本監聽「負載」或「DOMContentLoaded」事件被解僱，然後調用方法createExperiencesPostLoad（）。 Jquery Mobile通過Ajax加載新頁面，所以像這樣的加載事件在頁面轉換期間不會觸發。幸運的是，jquery Mobile爲我們提供了一個頁面轉換完成後觸發的「pageshow」事件，所以我們可以在「pageshow」事件之後調用createExperiencesPostLoad（）方法。

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

請注意，在此示例中，播放器包含在ID爲「my-video-player-container」的div中。我在調用方法之前檢查它是否可見。你將不得不改變這個來適應你的代碼。這種方法可能會被調用兩次，但比從不調用更好。

鏈接到一個工作版本：http://www.lawruk.com/test/brightcove-jquery-mobile-fix.htm

來源

2011-06-16 20:16:44

我的iPhone在正確的尺寸下加載視頻時遇到了一些麻煩，如果它位於初始頁面上，它可以正常工作，但如果是在後續頁面上，它不會以合適的尺寸加載視頻播放器。我最終只是把視頻播放器放在一個html頁面中，並將其加載到一個iframe中。 – spatical 2012-08-14 16:08:45