javascript - 使用 javascript 进行 onblur 时，在 Iframe 中暂停 youtube 和/或 vimeo 视频

Question

我想在用户单击浏览器中的另一个选项卡时暂停视频。我曾尝试通过 Youtube 和 Vimeo 做到这一点。

这是 JavaScript 背后的基本思想:

对于 YouTube:

//YouTube
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var youtubePlayer;
var onYouTubeIframeAPIReady = function() {
 youtubePlayer = new YT.Player('youtube', {
   height: '390',
   width: '640',
   videoId: 'sXtekwuT8R0',
   events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
   }
 });
};

var onPlayerReady = function(event) {
 event.target.playVideo();
};

var onPlayerStateChange = function(event) {
 if (event.data == YT.PlayerState.PLAYING) {
  parent.focus();
   window.onblur = function() {
     status.text("You went away!");
     youtubePlayer.stopVideo();
   };
 }
};

对于 Vimeo(使用他们的 Froogaloop 库):

$(function() {
  //Vimeo
  var iframe = $('#vimeo');
  var vimeoPlayer = $f(iframe[0]);
  var status = $('#status');

  vimeoPlayer.addEvent('ready', function() {
    vimeoPlayer.addEvent('play', function(){
      status.text("Playing!");
      parent.focus();
      window.onblur = function() {
        status.text("You went away!");
        vimeoPlayer.api("pause");
      };
    });
  });
});

以下是这些尝试的一些 codepen 示例:

YouTube: http://codepen.io/earlonrails/pen/jugAm

视频: http://codepen.io/earlonrails/pen/KBAmd

如果在单击播放按钮后，单击 iframe 的父文档，然后单击不同的窗口或选项卡，这两个示例都将起作用。 Youtube 示例在首次加载时也将起作用，但如果您单击“播放”然后暂停然后再播放，则不起作用。我相信这两个问题都是由于您单击 iframe 造成的，因此该事件要么同时触发，要么无法触发，因为无法在那里捕获该事件。我认为使用通过 iframe 发送的 postMessage 以及回调可以使这项工作正常进行，但可惜我无法弄清楚这一点。

Answer 1

添加事件回调之前需要设置当前窗口，并在回调函数中使用该窗口变量。 IE浏览器

var myWindow = window;
vimeoPlayer.addEvent('play', function(){
  status.text("Playing!");
  myWindow.focus();
  myWindow.onblur = function() {
    status.text("You went away!");
    vimeoPlayer.api("pause");
  };
});

这些可以在之前链接的 codepen 示例中进行确认和测试:

YouTube:http://codepen.io/earlonrails/pen/jugAm

Vimeo:http://codepen.io/earlonrails/pen/KBAmd

我猜想在 iframe 中单击时的窗口会在 iframe 窗口上设置 onblur，这样就永远不会被调用，但我仍然无法解释为什么当您单击 iframe 上的“播放”，然后单击该窗口的主体时页面，然后单击不同的选项卡即可工作。也许回调从 iframe 中被多次触发，或者 postMessage 被触发或仍在某个缓冲区中。