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

Posted 2023-05-08

【中文标题】HTML5 Video API - 全屏无法在 iPad 上使用 chrome/safari

【英文标题】：HTML5 Video API - Fullscreen not working with chrome/safari on iPad

【发布时间】：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();
        
    
);

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

【参考方案1】：

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

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

Going fullscreen on iPad Safari.

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