Вкладки Bootstrap (Chrome и Firefox)

У меня есть 2 вкладки, использующие вкладки Bootstrap. Каждая вкладка имеет тег объекта с кодом флеш-плеера Brightcove.

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

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

Кажется, это отлично работает в Firefox и IE, но в Chrome мы видим, что каждый раз, когда вкладка активна (или фокусируется с помощью постепенного исчезновения), срабатывает templateLoadHandler. Таким образом, каждый переключатель вкладки запускает 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 вкладки.

Chrome: Консольный вывод как myTemplateLoaded срабатывает каждый раз при загрузке видеоплеера.

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

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

myExperience0
myExperience1

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

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


person bdoshi    schedule 21.02.2013    source источник


Ответы (1)


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

person misterben    schedule 22.02.2013
comment
Более новые версии Firefox теперь ведут себя в этом отношении как Chrome. Я не уверен, в какой версии это изменилось, но это касается Firefox 24. - person misterben; 30.10.2013