你如何在iPad上展示HTML5视频的海报？

Question

我的HTML5视频语法几乎和这个人一样:

<video height="270" width="480"
    src="media/bbb.ogv" 
    poster="media/bbb.jpg" 
    durationHint="0:4:44">
</video>

在iPhone(iOS 5.0)和桌面Firefox上,我可以看到海报:

但在iPad(iOS 5.0.1)上它并没有出现.我记得它曾经适用于iOS低于5的iPad.

Answer 1

使用绝对路径而不是相对路径尝试相同的代码:

<video height="270" width="480"
    src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" 
    poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg" 
    durationHint="00:04:44">
</video>

如果这不起作用,他们的CDN可能会阻止外部引用,因此尝试将文件保存到您自己的本地服务器并使用它们的绝对路径.

注意:您不必使用绝对路径,但它在故障排除时肯定有帮助.

如果失败的另一个解决方案是使用绝对定位的图像叠加,当单击时,使用JavaScript来激活 标记如下; 但这是一个较旧的黑客,iOS 5+不应该要求.

iOS 3在视频标签上的海报属性肯定存在已知问题:http: //videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/