HTML5 -防止全屏模式
HTML5 -防止全屏模式
提问于 2017-06-25 05:43:15
我使用带有嵌入式全屏API视频的YouTube来检测浏览器窗口是否进入了全屏模式。我做得很好。
我想做的是防止出现进入全屏模式的默认行为。我想加入我自己的全屏模式逻辑，这样我就可以在YouTube播放器上覆盖DOM元素。目前，我可以在输入后立即退出全屏模式，但这会给用户带来糟糕和混乱的体验。
解决办法之一是使用YouTube的Player API参数删除全屏按钮，并使用我自己的逻辑添加我自己的按钮，但这并不理想，因为用户仍然可以双击YouTube播放器使其成为全屏。
下面是我的代码，用于检测浏览器的全屏状态：
$(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()不起作用，因此我陷入了困境。如果可以的话，如何防止浏览器进入全屏模式？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-27 08:57:13
禁用全屏按钮：fs: 0
禁用键盘控件：disablekb：1
当播放器加载时，删除全屏选项：
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;使用Fullscreen_API在DOM player上触发全屏(在本例中为iframe)
videoPlayer.requestFullScreen()如果按下ESC键或视频结束(自定义事件处理)，将发生全屏离开。
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>Stack Overflow用户
发布于 2017-06-25 05:51:09
以下是我所做的:)
<script type="text/javascript">
// Entering fullscreen mode
$('#videoSrcBlk').click(function() {
$("#full-screen").click(function() {
$(this).attr('id');
var vid = document.getElementById('selfVideo');
vid.removeAttribute("controls");
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen(); // Firefox
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen(); // Chrome and Safari
}
});
});希望有此帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44743559
复制相关文章
相似问题
腾讯云开发者
