HTML5 Video Not Displaying on iPad

Question

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)

Answer 1

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

Answer 2

I have heared there is still a bug in the iPad in concern of playing html 5 video. Maybe you can google for that and see if any result comes up.

Answer 3

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.

Answer 4

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.