HTML5 - предотвращение полноэкранного режима

Я использую полноэкранный API со встроенным видео YouTube, чтобы определить, перешел ли в окне браузера полноэкранный режим. У меня это отлично работает.

То, что я хотел бы сделать, это предотвратить появление поведения по умолчанию при входе в полноэкранный режим. Я хотел бы добавить свою собственную логику полноэкранного режима, чтобы я мог накладывать элементы DOM поверх проигрывателя YouTube. В настоящее время я могу выйти из полноэкранного режима сразу после входа в него, но это приводит к плохой и запутанной ситуации для пользователя.

Одним из способов решения этой проблемы является удаление полноэкранной кнопки с помощью параметров API проигрывателя YouTube и добавление моей собственной кнопки с моей собственной логикой, но это не идеально, поскольку пользователи все равно могут дважды щелкнуть проигрыватель 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() не сработало, поэтому я застрял на этом этапе. Как я могу запретить браузеру переходить в полноэкранный режим, если это действительно возможно?

Источник

2 ответа

Решение

Использование YouTube iframe API

Отключить полноэкранную кнопку: фс: 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>
Источник

Вот что я сделал:)

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

надеюсь, это поможет:)

Источник
Другие вопросы по тегам