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？

也可以查看this。

Answer 3

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

Answer 4

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

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

Going fullscreen on iPad Safari.

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

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

4 个答案: