webm before or after mp4 in HTML5 video element?

Question

Every tutorial/explanation I see out there that discusses HTML5 video format fallbacks use this type of markup as an example:

<video autoplay>  
  <source src="/myvideo.mp4" type="video/mp4">  
  <source src="/myvideo.webm" type="video/webm">  
  Sorry, your browser doesn't support HTML5 video.  
</video> 

So my question, why does everyone suggest to put the MP4 before the Webm format? If your browser supports Webm, it almost definitely supports MP4... The above markup essentially ensures that the more efficient Webm video will never be used, even though it has arguably better compression and will reduce bandwidth. Why is this?

Am I missing something about the way video fallbacks work?

Amorphism

Answer 1

It has to do with backwards compatibility with iOS 3 devices. iPads running iOS 3 had a bug that prevented them from noticing anything but the first video source listed.

MP4 video type was the only supported video format, so if the mp4 version of the video is not the first source, it is ignored.

So, if you want to deliver video to iPad owners who haven’t yet upgraded iOS, you will need to list your MP4 file first, followed by the rest of the video formats.

Read more

Eldrida

Thank you that is good to know. Fortunately iOS < 7 is <3% market share as of now. developer.apple.com/support/appstore – Amorphism

Answer 2

2023 answer

Your browser reads the sources from top-to-bottom until it finds one which is playable.

Your first source should be the highest preference to show the user - typically the one which has the clearest encoding.

For instance, I notice FLV encoded media is (typically) more distorted than MP4, so MP4/WEBM usually sits at the top because it is the truest source.

In 2023 Chromium (still) doesn't natively support MP4 (likely never will), so listing those second preferences is still vital.

Mariehamn