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.

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

Solution 2

In my non-exhaustive tests I found that h264 video with aac audio in an mp4 container (transcoded with ffmpeg) works at least for the following browsers:

• Chrome 80 on Android and Windows 10
• Safari on iPadOS and iOS 13.4, and on MacOS 10.15
• Internet Explorer 11 on Windows 10
• Firefox 74 on Android and Windows 10
• Edge 80 on Windows 10

I encoded a video file from a digital camcorder with the following ffmpeg parameters on Ubuntu 18.04:

ffmpeg -i before.mov -y -loglevel 31 -filter:v fps=fps=30 -movflags +faststart \ 
-f mp4 -vcodec libx264 -vf scale=1280:-1 -acodec aac -b:a 128k \ 
-b :v 1000k -preset faster 'after.mp4'

Edit

I found out that, strangely, an mp3-audio file plays back in Safari/MacOS in the audio-tag. But a video with an mp3 audio-track does not playback the audio.