HTML5 Video Not Displaying on iPad

15
votes

I've encoded a few videos on http://www.theparkerpalmsprings.com to play using HTML5 when loaded via an iPhone or iPad. In my testing, everything works as expected when viewing the site on an iPhone (I've tested on a 3G and iPhone 4), but when loading on the iPad the Quicktime logo flashes quickly and then nothing happens. Is this a problem with the encoding of the videos or am I doing something else incorrectly? Any input would be greatly appreciated!

A few test links (directly to pages with video):

http://theparkerpalmsprings.com/spa/ (large video on iPad, small video on iPhone) http://theparkerpalmsprings.com/rooms/estate.php (small video for both platforms)

3
iphonevideoipadhtmlhtml5-video
I wouldn't find this so hard to believe if it were the other way around (iPad could play videos, iPhone couldn't) but shouldn't any video that's able to play on the arguably less-capable version of Mobile Safari for iPhone work just as well on MobileSafari for iPad? – Andrew
Can you point us to the video files and your sample code with a <video /> tag? All I see in your example links is Flash and you're probably aware that Flash is not supported on iPad ;-? ? By-the-way: Safari on iPad is quite picky about the exact videoformat. – André van Toly
I just tried the top link on my iPad (iOS 3.2, wifi) and a video played fine (I only watched 10 seconds.) – JoePasq
I fixed the issue but forgot to answer my own question. Updated today. – Andrew

3 Answers

32
votes

The answer was incredibly simple, which is why it was overlooked:

The iPad requires you to include the "controls" attribute in the video tag, otherwise there's no way for it to start playback of the video, unlike on the iPhone, where a large play button appears over all HTML5 video elements. The videos were all encoded properly but this simple tag was skipped over. Hopefully this will save someone the headache it caused me.

3
votes

Please don't sniff User-Agent!

That completely misses the point of interoperability HTML5 tries to bring (and fails in my Flash-blocked desktop browser). <object> and <video> support automatic fallback and detection.

Did you encode video as H.264 Baseline Profile? Flash supports full H.264 (High Profile), but iDevices can handle only lower-quality variants (iPad & iPhone 4 support Main, older devices only Baseline. Similarily with AAC.).

If you ever add alternative format (WebM), put H.264 <source> first, as iOS 3.2 cannot handle source selection properly.

2
votes

Same result on my iPad. Are you intending to stream the video? If so you'd need to follow Apple's Technical note TN2224.