HTML5 Video API - 全屏无法在 iPad 上使用 chrome/safari答案

【问题标题】：HTML5 Video API - Fullscreen not working with chrome/safari on iPadHTML5 Video API - 全屏无法在 iPad 上使用 chrome/safari
【发布时间】：2016-11-01 11:05:22
【问题描述】：

我使用 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();
        }
    }
});

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

【问题讨论】：

标签： javascript ipad video html5-video fullscreen

【解决方案1】：

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

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

Going fullscreen on iPad Safari.

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

【讨论】：