0

全部，

我有一个带有几个选项卡的 jsp 页面。其中一个选项卡具有嵌入的 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

在单个页面上的选项卡之间切换时暂停

首先，我假设您使用的是 iframe 嵌入类型？API 和 SEO 嵌入类型应自动检测“关闭”隐藏状态并自行停止。

如果您使用的是 iframe 嵌入类型，那么只需将 iframe API 添加到页面即可解决您的问题。http://wistia.com/doc/iframe-api

这是因为 iframe API 将监控您的嵌入代码的可见性状态，并在它从隐藏变为可见时“重建”。无法从 iframe 内部监控状态，这就是它需要 iframe API 的原因。

请注意，上述解决方案不仅会暂停视频，还会将其重置为开头。在 IE 中更改 flash 对象的可见性并没有得到很好的处理，所以当它出现时我们不得不重新构建。为了保持跨浏览器的一致性，其他浏览器的行为方式相同。

编辑：我将在下面留下这个答案，因为它对于切换浏览器选项卡时的暂停很有用，即使这不是确切的问题。

使用 jQuery 会更容易一些，因为 $(window).blur(function(){ ... }) 非常可靠，但是您可以通过一些额外的努力来完成它。

首先，您需要一个跨浏览器的事件绑定函数来处理 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);
      });
    }
  }
}

上面的功能并不完美：模糊事件通常会连续触发多次，具体取决于页面上的焦点。但它是可行的。

一旦你有了这个功能，告诉 Wistia embed 暂停就很简单了。如果它是“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

我在 Google Chrome 和 IE7-9 上进行了测试，包括 Quirks Mode。

于 2012-09-02T16:47:42.770 回答