CODEWITHSUNDEEP
htmlvideo
Vamsi Emani
Vamsi Emani

Reputation: 10302

What are all the formats of video supported by html5?

I am trying to develop a simple webpage with all the newly added basic elements of html5. While working with the video tag, I see that some formats like .avi are not supported.

So is there a list of video formats supported by html5?

Even if a particular format like WebM/ogg is supported by html5, is it safe enough to presume that the browser used will be capable to display the video?

Upvotes: 3

Views: 5971

Answers (3)

Jay Brunet
Jay Brunet

Reputation: 3750

Long ago, Matthew's answer made more sense because no single video format was supported by all the major browsers. You needed at least two different video formats to cover all major browsers.

In 2024, it seems MP4 has nearly universal browser support https://en.wikipedia.org/wiki/HTML5_video#Browser_support

MP4 is the container -- indicated by the file extension. And H.264 is the most popular codec going into that container.

In my opinion, it's no longer necessary to host multiple versions of the same video. This should work:

<video width="320" height="240">
  <source src="myvideo.mp4" type="video/mp4" />
</video>

Tangentially, looks like YouTube and TikTok prefer MP4 as well https://support.google.com/youtube/answer/1722171?hl=en

Upvotes: 1

Kristoffer Lindvall
Kristoffer Lindvall

Reputation: 2682

There doesn't seem to be a single video format that is supported on all HTML5 capable browsers today. There's basically two formats that compete over being the one:

WebM - Supported by Firefox, Opera, Chrome, IE9 (with plugin)

H.264 - Supported by Safari and IE 9

So at the time, I think you'll basically has to provide the video in two formats and guess the browser to feed it the correct one.

Upvotes: 1

Matthew Scharley
Matthew Scharley

Reputation: 132264

There is no universally supported format (yet) unfortunately. Technically, HTML5 doesn't support any video formats, it's the browsers themselves that support specific video formats. This has led to a giant mess.

You can find a list of format compatibility on Wikipedia. From that, VP8/WebM is likely your best bet if you only want to support a single format. Luckily the <video> tag does support fallbacks if providing more than one encoding is feasible for your uses, in which case a VP8/WebM version combined with a H.264 version covers every major browser.

For multiple versions of the same video, you can use the following code:

<video width="320" height="240">
  <source src="myvideo.mp4" type="video/mp4" />
  <source src="myvideo.ogv" type="video/ogg" />
  <source src="myvideo.webm" type="video/webm" />
  <p>Other backup content, eg. a flash version, should go here.</p>
</video>

Upvotes: 3

Related Questions