ipadmobile-safarihtml5-videoposter

iOS 4.2.1 Mobile Safari won't show poster image


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.


Solution

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