Bootstrap製表符（Chrome和Firefox）

Question

我有2個使用Bootstrap製表符的選項卡。 每個選項卡都有一個帶有Brightcove Flash Player代碼的對象標籤。

每次在Firefox中切換選項卡時，都會保留Flash播放器的狀態（如果視頻已暫停），而在Chrome中則會重新加載視頻。

在每個標籤上單擊，我們顯示相應的視頻播放器。使用templateLoadHandler，我們正在追蹤哪些選項卡是用播放器加載的，並且在每個選項卡開關上我們正在暫停其他選項卡上的視頻。

這似乎在Firefox和IE瀏覽器工作正常，但在Chrome上，我們看到，每一個標籤是活動的時間templateLoadHandler火災（或淡出使用淡入對焦帶來）。因此，每個選項卡的開關在Chrome中都會觸發templateLoadHandler，而不會在FF和IE中觸發。

<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script> 

<script type="text/javascript"> 
    var player; 
    var modVP; 
    var playerlist = new Array(); 

    function myTemplateLoaded(experienceID) { 
     playerlist.push(experienceID); 
     console.log(experienceID); 
     player = brightcove.api.getExperience(experienceID); 
     modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER); 
    } 


</script> 


<ul id="myTab" class="nav-tabs "> 

     <li class="active">Tab 1</li> 
     <li class="">Tab 2</li> 
    </ul> 

     <div id="myTabContent" class="tab-content"> 

<div id="tab1" class="tab-pane fade active in"> 
    <object class="BrightcoveExperience" id="myExperience0"> 
          <param name="bgcolor" value="#FFFFFF"> 
          <param name="width" value="700"> 
          <param name="height" value="440"> 
          <param name="playerID" value="XXXXXXXXX"> 
          <param name="@videoPlayer" value="XXXXXXXXXXX"> 
          <param name="isVid" value="true"> 
          <param name="autoStart" value="false"> 
          <param name="isUI" value="true"> 
          <param name="dynamicStreaming" value="true"> 
          <param name="wmode" value="Transparent"> 
          <param name="templateLoadHandler" value="myTemplateLoaded"> 
          <param name="includeAPI" value="true"> 
          <param name="htmlFallback" value="false"> 
         </object> 


</div> 

<div id="tab2" class="tab-pane fade"> 
     <object class="BrightcoveExperience" id="myExperience1"> 
          <param name="bgcolor" value="#FFFFFF"> 
          <param name="width" value="700"> 
          <param name="height" value="440"> 
          <param name="playerID" value="XXXXXXXXX"> 
          <param name="@videoPlayer" value="XXXXXXXXXXX"> 
          <param name="isVid" value="true"> 
          <param name="autoStart" value="false"> 
          <param name="isUI" value="true"> 
          <param name="dynamicStreaming" value="true"> 
          <param name="wmode" value="Transparent"> 
          <param name="templateLoadHandler" value="myTemplateLoaded"> 
          <param name="includeAPI" value="true"> 
          <param name="htmlFallback" value="false"> 
         </object> 


</div> 

</div> 

在上面的代碼中：playerlist數組在Chrome中不斷增加，而Firefox中修復了2個選項卡。

Chrome：控制檯輸出爲myTemplateLoaded，每次加載視頻播放器時都會觸發。

myExperience0 
myExperience1 
myExperience0 
myExperience1 
myExperience0 
myExperience1 
..... every time tab is switched. Video player reloads. 

Firefox/IE9：控制檯輸出。 myTemplateLoaded每個玩家只會被觸發一次。

myExperience0 
myExperience1 

...只有一次。以前的視頻播放器狀態保持不變。

有沒有人有任何想法呢？ 我不認爲它的Brightcove API問題，但與Chrome的bootstrap選項卡或僅處理選項卡內的Chrome的Chrome有關？

Answer 1

Chrome在隱藏元素顯示之前不會加載swfs。它在隱藏時卸載swfs，並在再次顯示時重新加載它們。一種避開隱藏選項卡時使用width:0;height:0;overflow:hidden而不是display:none的方法。