iOS and HTML5 has been seriously oversold by Apple and the devices are pretty poor in comparison to the desktop. Audio and video are particularly poor, so to solve my problem I used an audio sprite, a technique that was similar to CSS sprites, just for audio.

HTML5 video player comparison

For maximum compatibility, here’s what your video workflow will look like:

1. Make one version that uses Theora video and Vorbis audio in an Ogg container.
2. Make another version that uses WebM (VP8 + Vorbis).
3. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
4. Link to all three video files from a single <video> element, and fall back to a Flash-based video player.