Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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?

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

Thank you that is good to know. Fortunately iOS < 7 is <3% market share as of now. developer.apple.com/support/appstore – Jake Wilson Jan 24, 2015 at 15:52

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.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.