0

全て、

いくつかのタブを持つjspページがあります。タブの 1 つに wistia ビデオが埋め込まれています。ビデオ タブから別のタブに移動すると、ビデオの再生が停止し、Firefox と Chrome では正常に動作しますが、IE では引き続き再生されます。

ユーザーがビデオ タブから離れたときにビデオを一時停止しようとしています。javascriptを使用してこれを達成するにはどうすればよいですか? 私たちのサイトでいくつかの競合が発生したため、jquery を使用できません。

以下は、タブ jsp コードです。

 <div id="tab_container">
    <div id="container_tabs">
     <div class="tabselected" id="tab_1" onclick="show(this);">Tab1</div>
     <div class="tab" id="tab_2" onclick="show(this);">Tab2</div>
     <div class="tab" id="tab_3" onclick="show(this);">Tab3</div>
    </div>

    <div id="container_content">
      <div id="tabtest_1" style="display: block;">
        <dsp:include page="page1.jsp" />
      </div>    
      <div id="tabtest_2" style="display: none;">
        <dsp:include page="page2.jsp" />                  
      </div>    
      <div id="tabtest_3" style="display: none;">
        <dsp:include page="page3.jsp"/>
           </div>   
     </div>
 </div>

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

1

1 つのページでタブを切り替えるときに一時停止する

まず、iframe 埋め込みタイプを使用していると思いますか? API および SEO 埋め込みタイプは、「ダウン」非表示状態を自動的に検出し、停止する必要があります。

iframe 埋め込みタイプを使用している場合は、ページに iframe API を追加するだけで問題を解決できます。http://wistia.com/doc/iframe-api

これは、iframe API が埋め込みコードの表示状態を監視し、非表示から表示に変わると「再構築」するためです。iframe 内から状態を監視することはできないため、iframe API が必要です。

上記の解決策は、ビデオを一時停止するだけでなく、最初にリセットすることに注意してください。IE でのフラッシュ オブジェクトの可視性の変更は適切に処理されていないため、フラッシュ オブジェクトが表示されると再構築を余儀なくされます。ブラウザー間の統一性を保つために、他のブラウザーは同じように動作します。

編集：正確な質問ではありませんが、ブラウザのタブを切り替えるときに一時停止するのに役立つため、この回答を以下に残します。

$(window).blur(function(){ ... }) はかなり信頼できるため、jQuery を使用すると少し簡単になりますが、少し余分な努力をすれば実現できます。

まず、IE のウィンドウのぼやけの特異性を処理するクロスブラウザー イベント バインディング関数が必要です。

var activeElement = document.activeElement;
function bindEvent(elem, eventName, fn) {
  if (elem.addEventListener) {
    elem.addEventListener(eventName, fn, false);
  } else if (elem.attachEvent) {
    if ((elem === window || elem === document) && eventName === "blur") {
      document.attachEvent("onfocusout", function() {
        if (activeElement === document.activeElement) {
          fn.call(window.event.srcElement, window.event);
        }
        activeElement = document.activeElement;
      });
    } else {
      elem.attachEvent("on" + event, function() {
        fn.call(window.event.srcElement, window.event);
      });
    }
  }
}

上記の関数は完全ではありません。ページで何がフォーカスされているかによって、blur イベントが連続して複数回発生することがよくあります。しかし、それは実行可能です。

その機能があれば、Wistia 埋め込みに一時停止を指示するだけです。「API」または「SEO」スタイルの埋め込み (iframe ではない) の場合は、次のように使用できます。

bindEvent(window, "blur", function() {
  wistiaEmbed.pause();
});

iframe スタイルの埋め込みの場合は、埋め込みコードの後のどこかに Wistia iframe API をページに追加することによってのみ、これを実現できます。それが完了したら、iframe を介して API にアクセスして一時停止できます。

bindEvent(window, "blur", function() {
  document.getElementById("the_iframe_id").wistiaApi.pause();
});

通常の JavaScript API の詳細: http://wistia.com/doc/player-api

Quirks モードを含め、Google Chrome と IE7-9 でテストしました。

于 2012-09-02T16:47:42.770 に答える