Detect model of iOS device using Javascript or HTML?

Question

So I'm serving H.264 .mp4 video on my website. I'm using open source HTML5 video player http://mediaelementjs.com/. Some visitors are viewing from Safari for iPhone. The iPhone 4 supports video playback only up to 720p, so if I make my videos smaller than that, they work on the 4 and the 4S. But the 4S supports video up to 1080p. So how would I serve a larger video to the 4S and a smaller video to the 4? I tried this:

<video width="640" height="400" id="player" controls="controls" preload="auto">
    <source src="https://s3.amazonaws.com/my-big-1080p-video.mp4" type="video/mp4">
    <source src="https://s3.amazonaws.com/my-small-720p-video.mp4" type="video/mp4">
</video>

But it didn't work. The iPhone 4 isn't smart enough to try the second source. How can I make my website serve the correct video to the different devices?

Answer 1

Play 720p video on iPhone 4 — 1080p video on iPhone 4S

Try this on an iPhone 4 and a 4S (jsfiddle)

<video src="http://file.brow.sr/1080p.mp4" onerror="this.src='http://file.brow.sr/720p.mp4';" controls loop width="320" height="180">
</video>

Explanation

Load the 1080p video, then use Javascript's onError to fall back to 720p.

Safari will sniff the header of the 1080p file to determine if it's playable, and if it's too big to decode it will throw an error. We then catch that error to provide the 720p video.

By using this kind of feature detection, the fallback will not only work on one device (iPhone 4) but probably on a lot of different capable browsers.

Why multiple <source>'s won't work

When using multiple <source> tags with the same MIME types, the browser will load the first source that has a compatible MIME type and discard the others, even if that video is not playable. That's because source elements are expected to provide alternative video codecs (eg. ogg, webm, mp4), not alternative frame sizes / file sizes.