webkitEnterFullscreen () с использованием внешней кнопки работает в Chrome и Safari, но не в iOS - PullRequest
Новая
       24

webkitEnterFullscreen () с использованием внешней кнопки работает в Chrome и Safari, но не в iOS

1 голос
/ 28 февраля 2012

Может кто-нибудь сказать мне, почему webkitEnterFullscreen (), использующий внешнюю кнопку, работает в Chrome и Safari, но не в iOS?

В iOS кнопка не работает, даже если я установил видео «видимым»,Похоже, что он работает только после воспроизведения видео, тогда он позволит мне запустить полноэкранный режим.Я не могу написать сценарий с помощью «this.play ();», он работает только тогда, когда человек нажимает кнопку воспроизведения.

Я использую iPad 2 и iOS 5.0.1 

<html>
    <head>
        <title>Fullscreen Video</title>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">

            $(function(){
                // hide video
                $("#myVideo").css({'visibility' : 'hidden', 'display' : 'none'});

                // extend button functionality
                $('#fs').bind('click', function() {
                    // display the video
                    $("#myVideo").css({'visibility' : 'visible'});

                    // launch the video fullscreen
                    $("#myVideo")[0].webkitEnterFullscreen();
                });
            });
        </script>

    </head>
    <body>

        <h1>Fullscreen Video</h1>
        <video id="myVideo" width="852" height="480" controls="false" preload="false">
            <source src="videos/myVideo.mp4" type='video/mp4' />
        </video>
        <br />
        <input type="button" id="fs" value="Fullscreen">

    </body>
</html>

1 Ответ

1 голос
/ 02 июня 2012

Не следует ли переопределить «display: none» при переопределении «visibility: hidden»?

Я позиционирую свое видео вне экрана (-2000 с position: absolute) и использую: 

<script>

var videoPlayFullscreen = function() {
       $('video').get(0).play();        
       $('video').get(0).webkitEnterFullscreen();  
    };

</script>

Я не мог заставить его работать, пока не использовал ".get(n)", если это поможет.(что может совпадать с тем, что вы делаете: $('video')[n].

Но мой полноэкранный режим работает только в том случае, если видео уже воспроизводится, как у вас, но приведенный выше код для его воспроизведения работает на iphone4и iPad 1-го поколения.

Моя проблема: на iPad 1-го поколения видео воспроизводится при первом щелчке (первый раз запускается функция videoPlayFullscreen) и переходит в полноэкранный режим при втором щелчке (второй раз - функциязапускается). Я думаю, что он не готов сделать полноэкранный режим сразу, так что, может быть, задержка до того, как это сработает?

Код воспроизведения работает на iPhone 4 (который запускает полноэкранный режим только с воспроизведениеми не использует / не нуждается webkitEnterFullscreen в моем опыте).

...