iOS 4.2.1 Mobile Safari won't show poster image

Question

I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:

<video src="video/about_the_man.mp4" controls height=360 width=480  poster="video/posters/about_the_man.jpg"></video>

I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.

Answer 1

I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.

After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.

Maybe it will work for you?

Answer 2

I found there is a limit to the amount of images you can load on an iPad

Here is what it says:

I hit a mobile Safari limitation recently when building an AJAX-y site on the iPad. If you load a ton of images eventually mobile Safari cuts you off and will display a [?] instead of the image. After doing some tests it appears that this limit is around 6.5 MB. Here’s a test page I made that attempts to load 20 500kb images. When opening this page on an iPad, 7 of the images don’t appear, even though in Charles they are returning 200 – success. I’m assuming this is similar to the way autoplay is disabled for the video tag on iPad/iPhone. Apple probably wants to make sure users don’t get overloaded with downloads when browsing on 3G.

Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.

Here’s another test page using the canvas tag, all the images should load.