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

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

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 3

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.