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 - 防止全屏模式

回答

相關問題