HTML5视频API-全屏无法在iPad上使用Chrome / Safari浏览器

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

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

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

在iPad Safari上全屏显示。

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