离开标签时如何停止在标签中播放的 wistia 视频？答案

【问题标题】：How to stop wistia video being played in a tab when navigating away from tab?离开标签时如何停止在标签中播放的 wistia 视频？
【发布时间】：2022-04-05 21:59:33
【问题描述】：

全部，

我有一个带有几个选项卡的 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>

感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript jquery tabs

【解决方案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 模式。

【讨论】：

【解决方案2】：

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

onReady: (video) => {

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

这适用于我的情况。如果IE不是问题。不过我还没有在 IE 中测试过。

【讨论】：