Question

我使用带有嵌入式YouTube视频的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()无法正常工作，所以我在这一点上陷入困境。如果可能的话，如何阻止浏览器进入全屏模式？

Answer 1

使用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播放器（在我们的示例中为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>

Answer 2

这就是我所做的：）

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

希望这有帮助：）

HTML5 - 防止全屏模式

2 个答案: