Tips and tricks: HTML5 video and audio on iOS

Switching from the business to the nuts-and-bolts of HTML5:

One of the appeals of HTML5 is, of course, its ability to run comfortably on mobile platforms. But some innate features of a mobile device, even one that supports HTML5 fully, can get in the way.

For example, form-factor affects optimal video size. You don't really want to play embedded video on 15% of a smartphone's screen -- it's just too small to see.

On another note, data plans that charge by the byte can make embedded media the user's wallet's enemy -- however pleasant the background music might sound to their ears.

Besides, smartphone users are almost certainly less engaged with their devices than desktop users. The result is that smartphone apps are more likely to be backgrounded more frequenty -- whether on the phone or even just in the user's attention.

To address these issues, Apple modified Safari's HTML5 functionality on the iOS.

Apple also offered developers an an iOS-specific guide to HTML5 audio and video in Safari, but the guide reads a little more like a list of special considerations han a solutions manual.

maandag at VPRO Digitaal fills the issues/solutions gap with some nice tips for getting HTML5 video and audio to work on the iOS. Here are his hacks and tips, in summary:

Autoplay problems

Autoplay and preload are normally disabled on iOS, ostensibly to prevent unwanted data transfer usage.

Solution: do a synchronous Ajax call (rather than the jQuery default asynchronous call).

The video element on iPhone and iPod Touch

Note that iPad plays <video> normally; iPhones and iPods always play video full-screen.

Audio in the background

Audio in a Safari window will keep playing, even if the user switches to another app.

Playlists

Playlists can get a little complicated, so here my summarizing becomes less helpful.

You might want to read the full post, which includes links to additional HTML5-in-iOS resources.