YouTube Player API检测全屏退出

Question

所以基本上有一个按钮，当点击打开并全屏播放视频时。我想在用户退出全屏时停止视频，但无法捕捉该事件。

现在我这个用户为起始http://codepen.io/bfred-it/pen/GgOvLM

有人能告诉我一个可能的解决方案。

HTML：

<script src="https://www.youtube.com/iframe_api"></script> 
<button>play fullscreen</button><br> 
<div id="player"></div> 

JS：

var player, iframe; 
var $ = document.querySelector.bind(document); 

// init player 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '200', 
    width: '300', 
    videoId: 'dQw4w9WgXcQ', 
    events: { 
     'onReady': onPlayerReady 
    } 
    }); 
} 

// when ready, wait for clicks 
function onPlayerReady(event) { 
    var player = event.target; 
    iframe = $('#player'); 
    setupListener(); 
} 

function setupListener(){ 
$('button').addEventListener('click', playFullscreen); 
} 

function playFullscreen(){ 
    player.playVideo();//won't work on mobile 

    var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen; 
    if (requestFullScreen) { 
    requestFullScreen.bind(iframe)(); 
    } 
} 

Answer 1

，可以检测何时浏览器full screen change然后停止视频

document.addEventListener("fullscreenchange", function() { 
    if (!document.fullscreenElement) player.stopVideo(); 
}, false); 

document.addEventListener("msfullscreenchange", function() { 
    if (!document.msFullscreenElement) player.stopVideo(); 
}, false); 

document.addEventListener("mozfullscreenchange", function() { 
    if (!document.mozFullScreen) player.stopVideo(); 
}, false); 

document.addEventListener("webkitfullscreenchange", function() { 
    if (!document.webkitIsFullScreen) player.stopVideo(); 
}, false);