HTML5 视频全屏无法在 iPad 上运行

Question

我有一个 html5 视频流。我使用自定义控件，并使用 jQuery 将操作绑定到它们。其中一个控件是全屏按钮，它调用 video.webkitEnterFullScreen()。当我在 Safari 全屏中测试它时效果很好。当我在 iPad 上尝试此操作时，它失败了。什么给？

这是我在 html 中声明视频的方式：

<video preload="true" width="720" height="405"></video>

这是我的全屏按钮的声明：

<a href="javascript:;" class="fullscreen">
     <span class="icon"></span>
</a>

这是我将按钮绑定到操作的方式：

var video = $('video')[0];
$('body').find('.fullscreen').click(function(){
     video.webkitEnterFullscreen();
});

$('body').find('.fullscreen .icon').click(function(){
     video.webkitEnterFullscreen();
});

同样，这在 safari 中有效，但在 ipad 上无效。当将警报和日志语句包含到函数声明中时，它们就会出现，这意味着我的点击确实在 ipad 上注册了，但视频不会进入全屏模式。帮助！

更新：只是为了澄清我的问题，我在播放时没有遇到问题。该视频可在 Safari 桌面版和 iPad 版 Safari 中播放。在桌面版 safari 上，全屏可以工作，但在 ipad 版 safari 上，全屏不起作用。

Answer 1

坏消息抱歉...到目前为止 iPad 还不支持 webkitEnterFullscreen。好消息是规范已在此处起草：http://dvcs。 w3.org/hg/fullscreen/raw-file/tip/Overview.html

我们需要再等一会儿才能发生......

Answer 2

一件事，虽然我不确定它在这里重要，但 preload="true" 不再有效。 preload 可以设置为以下之一：metadata、none 或 auto（这可能就是它被设置为的内容）这里）。

也许 iPad auto 默认设置是不预加载任何内容，所以也许尝试将其设置为 metadata？

也请查看此。

Answer 3

因此，经过艰苦繁琐的调试后，我发现了问题的原因。我检查了所有可以由播放器继承的 CSS 规则，并切换它们（将它们注释掉然后再注释掉），看看会产生什么效果。终于我找到了罪魁祸首。我的视频所在的 div 最初有一个 css 类，其规则为“可见性：隐藏”。当用户按下页面上的按钮时，jQuery 会触发一个命令将此规则从“隐藏”更改为“可见”。从初始 css 类中删除“可见性：隐藏”规则使我能够在 ipad 上全屏显示。现在我可以在 ipad 上全屏显示，但我的项目设计不起作用，但这是另一篇文章的问题。我希望这可以帮助处于类似情况的其他人。

Answer 4

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

现在，您可以在 iPadOS Safari 上支持全屏 Web 应用程序。下面分享的是跨浏览器和 iPadOS 12.x+ 仅限 Safari 的解决方案以及必要的代码：

在 iPad Safari 上全屏显示。

披露：我已在上述链接上撰写了博客。请注意，iPadOS 上的 Chrome 仍然不支持全屏 api，但从这里开始只会变得更好。