使用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

Vimeo的：如果我点击播放按钮后，我在iframe的父文档单击然后单击一个不同的窗口或标签 http://codepen.io/earlonrails/pen/KBAmd

两个例子都将工作。 Youtube示例在第一次加载时也会起作用，但如果您单击该播放然后暂停然后播放，则该示例不起作用。我相信这两个问题都是由于你点击了iframe，因此事件要么同时触发，要么不能被触发，因为事件不能被捕获。我认为使用通过iframe发送的postMessages以及回调会使这项工作，但可惜我一直无法弄清楚。

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被触发或者仍然在某个缓冲区中。