HTML5-防止全屏模式 [英] HTML5 - Prevent Fullscreen Mode
问题描述
我正在将全屏API 与嵌入YouTube视频，以检测浏览器窗口是否已进入全屏模式.我的工作很棒.
I'm using the Fullscreen API with an embedded YouTube video to detect whether or not the browser window has entered fullscreen mode. I have that working great.
我想做的是防止出现进入全屏模式的默认行为.我想输入自己的全屏模式逻辑，以便可以将DOM元素叠加在YouTube播放器的顶部.目前，我可以在进入全屏模式后立即退出全屏模式，但这会给用户带来糟糕而混乱的体验.
What I'd like to do is prevent from occurring the default behavior of entering fullscreen mode. I'd like to put in my own fullscreen mode logic so that I can overlay DOM elements on top of the YouTube Player. Currently, I can exit fullscreen mode immediately after entering it, but that results in a poor and confusing experience for the user.
一种解决方法是使用YouTube的Player API参数删除全屏按钮，并使用我自己的逻辑添加我自己的按钮，但这并不理想，因为用户仍然可以双击YouTube播放器使其变为全屏.
One workaround is to remove the fullscreen button using YouTube's Player API parameters and add my own button with my own logic, but this is not ideal because users can still double-click on the YouTube player to make it full screen.
这是我用于检测浏览器全屏状态的代码:
Here's my code for detecting the fullscreen state of the browser:
$(document).on("fullscreenchange webkitfullscreenchange msfullscreenchange mozfullscreenchange", function(event)
{
onFullScreenChange(event);
});
function onFullScreenChange(event)
{
var fullScreenElement =
document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
var isFullscreen = !!fullScreenElement;
console.log("In fullscreen mode?", isFullscreen);
if (isFullscreen === true)
{
// TODO: Prevent the browser from entering full screen mode. These three lines don't prevent that behavior
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false;
// The commented code below works. Ideally, we'd want to prevent the browser from even entering full screen mode
//document.webkitExitFullscreen();
}
}
使用preventDefault()，stopPropagation()和stopImmediatePropagation()无效，因此我被困在这一点上.如果确实可以，如何防止浏览器进入全屏模式?
Using preventDefault(), stopPropagation(), and stopImmediatePropagation() didn't work, so I'm stuck at this point. How can I prevent the browser from entering fullscreen mode, if indeed it is possible?
推荐答案
禁用全屏按钮: fs:0
禁用键盘控件: disablekb :1
加载播放器后，删除全屏选项:
When player loaded, remove full-screen option:
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;
使用Fullscreen_API在DOM播放器(本例中为iframe)上触发全屏显示
Trigger full-screen on DOM player (iframe in our case) with Fullscreen_API
videoPlayer.requestFullScreen()
如果按ESC键或视频结束(自定义事件处理)，则会发生全屏离开
Full screen leave will happen if ESC key is pressed or video ends (custom event handling)
JsFiddle 工作示例:
<!DOCTYPE html>
<html>
<body>
<!-- The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<br />
<button id="fullScreenPlayer">Full Screen Player</button>
<script>
// DOM player
var videoPlayer;
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player',
{
height: '390',
width: '640',
videoId: 'nAgKA7R4Fz4',
// params: https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
playerVars: { 'fs': 0, 'disablekb': 1, 'rel': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;
// Listen for fulscreen changes, if you need custom logic here, but I won't recommned that, it's to complex and you don't have control inside YT iframe
videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
}
// If the video reach the end then player will leave full screen
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
leaveFullscreen();
}
}
function stopVideo() {
player.stopVideo();
}
// fullscreen event handller
function fullScreeCallback(e) {
// do what you like when you catch the event
console.log(e);
return false;
}
var goFullscreen = function () {
if (videoPlayer === undefined) throw "player is undefined";
if (videoPlayer.requestFullScreen) {
videoPlayer.requestFullScreen();
} else if (videoPlayer.mozRequestFullScreen) {
videoPlayer.mozRequestFullScreen();
} else if (videoPlayer.webkitRequestFullScreen) {
videoPlayer.webkitRequestFullScreen();
}
}
var leaveFullscreen = function () {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
document.getElementById('fullScreenPlayer').addEventListener("click", function(e) {
goFullscreen();
}, false);
</script>
</body>
</html>
这篇关于HTML5-防止全屏模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
