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.

No, not yet. It seems to be largely iOS-version (and phase of the moon) dependent, though, as I haven't been able to replicate it reliably across iPads. Ah well... — justinbach, Feb 23 '11 at 14:24

score 6 · Accepted Answer · answered Feb 24 '11 at 16:15

6

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?

answered Feb 24 '11 at 16:15

Critter

998
4
11
23

After hours of research all I needed to do is restart the iPad. ha! my goodness. – Ole Media Aug 10 '11 at 17:12
Can confirm exactly same fix worked for me too with a plain – Maks Apr 25 '12 at 23:56
Still the same on iOS 7.2.1 – FlorianLudwig Sep 10 '14 at 10:21

score 2 · Answer 2 · edited Nov 13 '12 at 18:59

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.

iOS 4.2.1 Mobile Safari won't show poster image

2 Answers2