HTML5 - 防止全屏模式

我使用Fullscreen API和嵌入的YouTube视频来检测浏览器窗口是否进入全屏模式。我的工作很棒。HTML5 - 防止全屏模式

我想要做的是防止发生进入全屏模式的默认行为。我想放入自己的全屏模式逻辑，以便可以在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()没有工作，所以我坚持在这一点上。如果确实有可能，我该如何防止浏览器进入全屏模式？

来源

2017-06-25 Alexander

使用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;

对DOM的球员（在我们的例子中的iframe）与Fullscreen_API

触发全屏

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>

来源

2017-06-27 08:57:13 SilentTremor

感谢您的真棒回答！这真的很好，是我在问题中提到的解决方法。有什么方法可以在使用YouTube的全屏按钮时使其工作？当YouTube的按钮被点击时，fullscreenchange事件被触发。我想阻止YouTube播放器进入全屏模式，而是在使用YouTube的全屏按钮时从我的某个DOM元素请求全屏。 – Alexander

可以显示全屏按钮，从玩家变量中删除'fs'：0，但它不会全屏显示，因为强制不这样做，点击事件或其他事件不能被监听在iframe中，我的回答是解决方法是，你可以通过这种方式来阻止全屏，我会试着找到一个解决方案，但我确定没有一个解决方案。 – SilentTremor

如果yt.player“fs”按钮是不可变的，那么控制全屏时，我再次阅读你的问题，它说它不需要全屏双击发生，在播放器fs控制点击或键盘快捷按下（我添加这）在播放器上它会过度播放一些HTML，添加那里全屏幕触发这是你唯一的选择与youtube iframe API，如果你想控制全屏幕使用另一个球员，你可以找到很多，但移动是一个很大的关注与那些，祝你今天愉快。 – SilentTremor

这里就是我所做的:)

<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 
      } 
     }); 
    });

希望这有助于:)

来源

2017-06-25 05:51:09 TheGinxx009

感谢您的回复，但我不确定您是否阅读我的问题。有几种方法可以进入全屏模式（键盘，点击视频播放器），这不会处理全部。 – Alexander

我明白了。好吧好吧，让我粘贴我的代码，以防止这种行为 – TheGinxx009

HTML5 - 防止全屏模式

回答

相关问题