当导航离开选项卡时，如何阻止wistia视频在选项卡中播放？

Question

全,

我有一个带有两个标签的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>

任何帮助都是非常感谢的。谢谢。

Answer 1

在单页的制表符之间切换时暂停

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

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

这是因为iframe将监视嵌入代码的可见性状态，并在从隐藏变为可见时“重新构建”。从iframe内部监视状态是不可能的，这就是为什么它需要iframe。

请注意，上面的解决方案不仅会暂停视频，而且会将其重置到开头。在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嵌入暂停。如果它是"API“或"SEO”风格的嵌入(即不是iframe)，您可以使用以下内容：

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

如果它是iframe样式的嵌入，那么您只能通过在嵌入代码之后的某个地方将Wistia添加到页面中来实现这一点。一旦完成，您就可以通过iframe访问API来暂停它。

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

以及关于常规javascript的更多信息：http://wistia.com/doc/player-api

我在谷歌Chrome和IE7-9上进行了测试，包括在古怪模式下。