Can a HTML 5 video tag have multiple MP4 sources with different codecs?

Question

I'm thinking about the fact that the higher the MP4 profile we go, the better the video quality gets...

This brings me to a question I thought I'd ask the experts!

Can a HTML 5 video tag have multiple MP4 sources with different codecs? Something like:

<video>
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="high.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' />
    <source src="main.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
    <source src="baseline.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"' />
</video>

The first MP4 video being a high profile video, the second main profile, and the third baseline profile.

On an iPhone 3G, will the baseline one be played?

On an iPhone 4S, will the high one be played instead?

A follow up question: if the high profile video is below the baseline profile video in the source list, which one will play on an iPhone 4G?

(Thanks for reading and especially if you reply. :)

Solution 1

According to Mozilla, <video> can contain an arbitrary number of <source> tags. Also, the first source tag with a compatible video file for the current device/browser should be played.

Apple themselves confirm that the <source> tags should be in the developer's preferred fall-through order, from which I'd assume that Mobile Safari, too, will pick the first file it can play.

So, from what I was able to dig up, there is no static way of preferring a particular file for a particular browser/device combination. You'd probably have to do some detection based on the provided User Agent string and only supply the proper files (but that's not possible with plain HTML).

Solution 2

You can provide several source tags and the user agent should play the first one it can handle.

See W3C definition: http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element

There also a javascript example for fallbacks is presented.

http://www.w3.org/TR/html5/embedded-content-0.html#mime-types shows some javascript how you can test if a browser can play a specific codec.

Solution 3

Multiple source files can be specified using the element in order to provide video or audio encoded in different formats for different browsers. For instance:

<video controls> 
    <source src="foo.ogg" type="video/ogg">  <source src="foo.mp4" type="video/mp4">
    Your browser does not support the <code>video</code> element.
</video>