Video Codec for all major browsers

Question

I am using

video/mp4

format and using in 'video js', this is working fine in chrome but having issue with Firefox. Getting following error in console:

Specified "type" attribute of "video/mp4" is not supported. Load of media resource # failed.

Is there any single video codec supported by all major browsers like Chrome, Firefix, IE and Safari.

Thanks in advance.

Answer 1

MP4 is a container format so it's also important what codecs you put inside it.

Firefox supports MP4 with H.264 for video and AAC or MP3 for audio and only if you have a third-party decoder available. If you're looking for a single format to rule them all you're out of luck since there's currently none.

The way you handle this is transcoding the same content file to multiple formats and use a fallback mechanism in your player.

See the Media Formats page on Mozilla to get an idea of what is supported and where. For eg. WebM with VP9/VP8, Vorbis/Opus works on Firefox.

In general, the fallback works by specifying all the different versions of the same file as sources for your <video> tag. The browser will choose the first that it can play.

Example from HTML5 Rocks:

<video controls>
  <source src="devstories.webm" type='video/webm;codecs="vp8, vorbis"'/>
  <source src="devstories.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>

If the browser cannot play WebM it will fall back to MP4.