0

我有 2 个使用 Bootstrap 选项卡的选项卡。每个选项卡都有一个带有 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 处理选项卡内的视频有关？

4

1 回答 1

1

Chrome 不会在隐藏元素中加载 swf，直到它们显示出来。它在隐藏时卸载 swf，并在再次显示时重新加载它们。一种绕过它的方法，width:0;height:0;overflow:hidden而不是display:none在隐藏选项卡时使用它。

于 2013-02-22T08:59:09.253 回答