<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
–
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.