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 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嵌入暂停了。如果它是“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模式。

如何在远离选项卡导航时停止在选项卡中播放wistia视频？

1 个答案: