Bootstrap制表符（Chrome和Firefox）

我有2个使用Bootstrap制表符的选项卡。每个选项卡都有一个带有Brightcove Flash Player代码的对象标签。Bootstrap制表符（Chrome和Firefox）

每次在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有关？

来源

2013-02-21 bdoshi

Chrome在隐藏元素显示之前不会加载swfs。它在隐藏时卸载swfs，并在再次显示时重新加载它们。一种避开隐藏选项卡时使用width:0;height:0;overflow:hidden而不是display:none的方法。

来源

2013-02-22 08:59:09 misterben

在这方面，较新版本的Firefox现在的行为与Chrome相似。我不确定哪个版本发生了变化，但Firefox 24就是这种情况。 – misterben 2013-10-30 11:30:26

Bootstrap制表符（Chrome和Firefox）

回答

相关问题