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

My HTML5 video syntax is nearly the same as this guy:

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

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

On iPhone (iOS 5.0) and desktop Firefox, I can see the poster:

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

But on iPad (iOS 5.0.1) it does not appear. I recall that it used to work on iPads with iOS less than 5.

但在iPad (iOS 5.0.1)上却没有出现。我记得它曾经在iOS小于5的ipad上使用过。

1 个解决方案

#1

Try the same code using absolute instead of relative paths:

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

<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>

If that doesn't work, their CDN might be blocking external referrers so try to save the files to your own local server and use absolute paths to them.

如果这不起作用，他们的CDN可能会阻塞外部引用者，所以请尝试将文件保存到您自己的本地服务器，并使用绝对路径。

NOTE: you don't have to use absolute paths but it definitely helps when troubleshooting.

注意:您不必使用绝对路径，但在进行故障排除时，它肯定会有所帮助。

Another solution if that fails is to use an absolute-positioned image overlay that when clicked, uses JavaScript to activate the tag below; but this is an older hack and shouldn't be required for iOS 5+.

如果失败，另一个解决方案是使用绝对定位的图像覆盖，点击时使用JavaScript激活下面的标记;但这是一个较老的黑客，不应该要求iOS 5+。

iOS 3 definitely has a known problem with the poster attribute on video tags: http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus-javascript-placement-fix/

iOS 3对视频标签的poster属性肯定有一个已知的问题:http://videojs.com/2010/09/ipad-iphone-video-poster-fix-bonus javascript- javascript- fix/