Question

我使用Will Haering的指南创建了一个自定义HTML5视频播放器： https://wch.io/posts/html5-video-api

我在iPad上使用Chrome或Safari时遇到的问题是视频无法进入全屏模式。

全屏Javascript代码如下：

fullScreenButton.click(function() {
    if(!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if(video.requestFullscreen) {
            video.requestFullscreen();
        } else if(video.msRequestFullscreen) {
            video.msRequestFullscreen();
        } else if(video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        } else if(video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
});

如果有人可以提出建议，因为我看过类似的帖子，但却没有解决问题的运气。

Answer 1

Apple最近（截至2019年初）将iPadOS与iOS分开，并且他们最早于去年秋天（2018年）提出了对iPad Safari上全屏api的支持。

您的脚本基本上是正确的，但是您可以在以下博客文章中找到完整的跨浏览器和iPadOS 12.x Safari及更高版本的解决方案：

Going fullscreen on iPad Safari.

披露：我已经写了在上述链接上共享的博客。请注意，iPadOS上的Chrome仍不支持全屏api。

HTML5视频API - 全屏无法在iPad上使用chrome / safari

1 个答案: