How do you show HTML5 video's poster on iPad?

html5-video, ios, ipad

Solution

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.

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

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/

Problem

My HTML5 video syntax is nearly the same as this guy: ``` <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: 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.

Original source