Question

我的HTML5视频语法与this guy几乎相同：

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

在iPhone（iOS 5.0）和桌面Firefox上，我可以看到海报：

enter image description here

但是在iPad（iOS 5.0.1）上它没有出现。我记得它曾经适用于iOS低于5的iPad。

enter image description here

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肯定存在视频标签上的poster属性的已知问题： http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/

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

1 个答案: