Question

我在iOS移动设备（iPhone和iPad，所有版本）的网络应用中遇到全屏模式的问题。

我有一个调用切换全屏功能的按钮。此功能适用于iOS以外的所有设备。

我的功能：

    function toggleFullScreen(e) {
                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                    $('body').css({'height': screen.height});
                    fullSreen = true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }else if(document.cancelFullScreen){
                        document.cancelFullScreen();
                    }
                    $('body').css({'height': 'auto'});
                    fullSreen = false;
                }
    }

它不适用于iOS手机/ iPad上的Safari，Chrome和Firefox，但功能是通话（我尝试使用一些警报信息）。我不明白为什么，提前thx！

Answer 1

请尝试以下代码。在我所有的iPhone浏览器中，它都可以正常工作。

HTML

<div class="video-banner-div">  
    <video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
        <source src="url_of_your_video.mp4" type="video/mp4">
    </video>
</div>

JS

vid = $('.video-banner-div video').get(0); // get the element of video tag

$(".full-screen-icon").on("click", function () {
   // on click of the button call the toggle function
    toggleFullScreen();
});

function toggleFullScreen() {
    if (vid.requestFullScreen) {
        vid.requestFullScreen();
    } else if (vid.webkitRequestFullScreen) {
        vid.webkitRequestFullScreen();
    } else if (vid.mozRequestFullScreen) {
        vid.mozRequestFullScreen();
    } else if (vid.msRequestFullscreen) {
        vid.msRequestFullscreen();
    } else if (vid.webkitEnterFullscreen) {
       vid.webkitEnterFullscreen(); //for iphone this code worked
    }
}

Answer 2

您可以在http://caniuse.com/fullscreen验证iOS Safari不提供全屏API，请查看此信息以获取更多信息 Full screen api HTML5 and Safari (iOS 6)。但是html视频元素可以全屏显示。

看一下https://brad.is/coding/BigScreen/，是一个很好的lib来处理全屏事件。

全屏切换功能无法在iOS手机/平板电脑上运行（Safari，Chrome和Firefox）

2 个答案: