使用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被觸發或者仍然在某個緩衝區中。