0

Bootstrap Tabs を使用して 2 つのタブがあります。各タブには、Brightcove フラッシュ プレーヤー コードを含むオブジェクト タグがあります。

Firefox でタブが切り替わるたびに、Flash Player の状態 (ビデオが一時停止されていた場合) が維持され、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>

上記のコード: Firefox では 2 つのタブが固定されているのに対し、Chrome では playerlist 配列が増え続けています。

Chrome: ビデオ プレーヤーが読み込まれるたびに、myTemplateLoaded としてのコンソール出力が発生します。

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

Firefox/IE9: コンソール出力。myTemplateLoaded は、プレーヤーごとに 1 回だけ発生します。

myExperience0
myExperience1

... 1回だけ。ビデオ プレーヤーの以前の状態が維持されます。

誰かがこれについて何か考えを持っていますか? ブライトコーブ API の問題ではないと思いますが、Chrome のブートストラップ タブか、タブ内のビデオを処理する Chrome だけに関係がありますか?

4

1 に答える 1

1

Chrome は、非表示の要素が表示されるまで、swfs を読み込みません。非表示の場合は swfs をアンロードし、再び表示される場合は再ロードします。タブを非表示にするwidth:0;height:0;overflow:hidden代わりに使用することを回避する1つの方法。display:none

于 2013-02-22T08:59:09.253 に答える