ios - 如何在 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 激活在下面标记；但这是一个较旧的 hack，iOS 5+ 不需要。

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