HTML5 – 防止全屏模式

我正在使用带有嵌入式YouTubevideo的Fullscreen API来检测浏览器窗口是否已进入全屏模式。 我的工作很棒。

我想做的是防止出现进入全屏模式的默认行为。 我想放入自己的全屏模式逻辑，以便我可以在YouTube播放器上叠加DOM元素。 目前，我可以在输入后立即退出全屏模式，但这会给用户带来糟糕和混乱的体验。

一种解决方法是使用YouTube的播放器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()都不起作用，所以我陷入了困境。 如果确实可以，我该如何阻止浏览器进入全屏模式？

 // Get DOM video player not YT videoplayer videoPlayer = document.getElementById('player'); // don't allow full screen videoPlayer.allowFullscreen = false; 

 videoPlayer.requestFullScreen() 

      
 
 Full Screen Player