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!

Answer 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).

Answer 2

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>

Answer 3

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.