YouTube Player API 检测全屏退出 [英] YouTube Player API detect fullscreen exit
本文介绍了YouTube Player API 检测全屏退出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以基本上有一个按钮,点击后会打开并全屏播放视频.我想在用户退出全屏但无法捕捉到该事件时停止视频.
So basically there is a button which when clicked opens and play a video in fullscreen. I want to stop the video when user exit fullscreen but can't catch that event.
现在我用它作为开始 http://codepen.io/bfred-it/pen/GgOvLM
有人可以指导我找到可能的解决方案吗.
Can someone direct me to a possible solution.
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)();
}
}
推荐答案
您可以检测浏览器何时 全屏切换然后停止视频
You can detect when the browser full screen change and then stop the video
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);
这篇关于YouTube Player API 检测全屏退出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文