Question

我有两个使用Bootstrap Tabs的标签。每个标签都有一个带有Brightcove flash播放器代码的对象标签。

每次在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>

在上面的代码中：播放列表数组在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处理标签内的视频有关吗？

Answer 1

Chrome不会在隐藏元素中加载swfs，直到显示它们为止。它在隐藏时卸载swfs，并在再次显示时重新加载它们。隐藏标签页时，可以使用width:0;height:0;overflow:hidden代替display:none来解决此问题。

Bootstrap标签（Chrome和Firefox）

1 个答案: