我正在使用带有嵌入式YouTube视频的全屏API来检测浏览器窗口是否已输入全屏模式。我的工作很棒。
我想做的是防止进入全屏模式的默认行为。我想放置自己的全屏模式逻辑，以便可以叠加在YouTube播放器之上的DOM元素。目前，进入该模式后，我可以立即退出全屏模式，但这会给用户带来糟糕而令人困惑的经验。
一个解决方法是使用YouTube的播放器API参数删除全屏按钮，并使用我自己的逻辑添加我自己的按钮，但这不是理想的选择，因为用户仍然可以双击YouTube播放器以使其全屏。p>这是我检测浏览器全屏状态的代码：
$(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()不起作用，因此我陷入困境。如果确实可以，我如何防止浏览器输入全屏模式？
使用youtube iframe api
禁用全屏按钮： 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播放器上触发全屏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>
这是我所做的：(
<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
}
});
});
希望这个帮助：(