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

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