如何在离开标签时停止在标签中播放紫藤视频

How to stop wistia video being played in a tab when navigating away from tab?

本文关键字：标签 播放 视频 离开      更新时间：2023-09-26

全部，

我有一个带有几个选项卡的jsp页面。其中一个标签上嵌入了一段紫藤视频。当我从视频选项卡导航到其他选项卡时，视频停止播放，在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>

感谢您的帮助。谢谢

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

首先，我假设您使用的是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

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

当窗口处于模糊状态时，我们可以暂停视频。

onReady: (video) => {
    window.addEventListener('blur', ()=>{
      video.pause()
    })
 .....

这对我来说是有效的。如果IE不是问题。不过我还没有测试IE。

相关文章：