Вкладки бутстрапа (Chrome и Firefox)

Question

У меня есть 2 вкладки с помощью вкладок Bootstrap. На каждой вкладке есть тег объекта с кодом вспышки Brightcove.

Каждый раз, когда вкладка включена в Firefox, состояние флеш-плеера (если видео было приостановлено) поддерживается в то время как в Chrome видео перезагружается.

На каждой вкладке мы показываем соответствующий видеоплеер. Используя templateLoadHandler, мы отслеживаем, какие вкладки загружаются с помощью проигрывателя, и на каждом переключателе табуляции мы приостанавливаем видео на других вкладках.

Это похоже на работу в Firefox и IE, но в Chrome мы видим, что каждый раз, когда вкладка активна (или в фокусе с постепенным исчезновением), загорается шаблонLoadHandler. Поэтому каждый коммутатор tab запускает templateLoadHandler в Chrome, а не в 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> 

В приведенном выше коде: массив игроков постоянно растет в Chrome, а в Firefox установлены 2 вкладки.

Хром: Консольный выход в качестве myTemplateLoaded fire при загрузке видеопроигрывателя.

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

Firefox/IE9: Консольный выход. myTemplateLoaded запускается только один раз для каждого игрока.

myExperience0 
myExperience1 

... только один раз. Сохраняется предыдущее состояние видеопроигрывателя.

У кого-нибудь есть идеи по этому поводу? Я не думаю, что его проблема с Brightcove API, но что-то делать с вкладкой начальной загрузки с Chrome или просто обработкой Chrome видео внутри вкладок?

Answer 1

Хром не загружает swfs в скрытые элементы до тех пор, пока они не будут отображаться. Он выгружает swfs, когда они скрыты, и перезагружает их, когда отображается снова. Один из способов обойти это, чтобы использовать width:0;height:0;overflow:hidden вместо display:none при скрытии вкладки.