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

Pause youtube and/or vimeo video in Iframe when onblur with javascript

本文关键字：youtube 暂停 视频 vimeo Iframe javascript onblur      更新时间：2023-09-26

当用户点击浏览器中的另一个选项卡时，我想暂停视频。我试过用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");
      };
    });
  });
});

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

Youtube：http://codepen.io/earlonrails/pen/jugAm

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

如果在我单击播放按钮后，我单击iframe的父文档，然后单击不同的窗口或选项卡，这两个示例都会起作用。Youtube示例在第一次加载时也会起作用，但如果你单击播放，然后暂停，然后播放，则不会起作用。我相信这两个问题都是由于您正在单击iframe，因此事件要么同时触发，要么无法触发，因为无法在那里捕获事件。我原以为使用通过iframe发送的postMessages和回调可以实现这一点，但遗憾的是，我一直没能弄清楚。

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

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

这些可以在之前链接的代码笔中进行确认和测试，例如：

Youtube：http://codepen.io/earlonrails/pen/jugAm

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

我想当在iframe中单击时，窗口会在ifame窗口上设置onblr，然后它永远不会被调用，但我仍然无法解释为什么当你在ifame上单击播放，然后单击页面的正文，然后单击不同的选项卡，它就会工作。也许回调从iframe被触发了不止一次，或者postMessage正在被触发，或者仍在某个缓冲区中。

相关文章：