使用javascript启用模糊时，在Iframe中暂停youtube和/或vimeo视频

我想在用户单击浏览器中的另一个选项卡时暂停视频。我试着用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库）：

以下是这些尝试的一些代码笔示例：

Youtube：

维梅奥：

---

如果在单击“播放”按钮后，单击iframe的父文档，然后单击其他窗口或选项卡，则这两个示例都可以使用。Youtube示例在首次加载时也可以使用，但如果单击播放然后暂停再播放，则无法使用。我相信这两个问题都是由于您正在单击iframe，因此事件要么同时触发，要么无法触发，因为无法在那里捕获事件。我认为使用通过iframe发送的postmessage和回调可以实现这一点，但遗憾的是，我还没有弄明白这一点。

需要在添加事件回调之前设置当前窗口，并在回调函数中使用此窗口变量。即

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

这些可以在前面链接的代码笔示例中确认和测试：

Youtube：

维梅奥：

我猜当在iframe中单击时，窗口将在iframe窗口上设置为onblur，这样就永远不会被调用，但我仍然无法解释为什么在iframe上单击play，然后单击页面主体，然后单击另一个选项卡，然后就可以了。可能从iframe多次触发回调，或者正在触发postMessage，或者仍然在某个缓冲区中

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