Which video format/codecs should I use for HTML <video> to support actual most recent major browsers?

Question

I see other questions addressing the same subject:

• What HTML5 video codecs should be used?
• Which video and audio format/codec should I use?

But they are old and on this subject having updated information I think is crucial.

I am using now video/webm;codecs=vp9 but I am having problems with some browsers

So what format(s)/codec(s) versions of my video should I offer to support the last version of the major browsers in Windows, Linux, Mac, Android and iOS?

I am generating the video in the browser it self using MediaRecorder so if the suggested format(s)/codec(s) can be generated using this system this will save me the extra step to re-encode it on the server.

If you have a ffmpeg command configuration to generate the format(s)/codec(s) this will also help me.

Answer 1

As @Offbeatmammal suggested on his/her comment, we can see the actual compatibility for the video codecs here:

• https://caniuse.com/?search=video

But the amount of information there is huge and difficult to digest in a specific answer.

Our friends from developer.mozilla.org have some specific suggestions to make and I hope they are updated:

• A WebM container using the VP9 codec for video and the Opus codec for audio
• An MP4 container and the AVC (H.264) video codec, ideally with AAC as your audio codec

Result:

<video controls>
  <source src="video.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="video.mp4" type='video/mp4; codecs="avc1, aac"'>    
</video>

These are the ffmpeg most basic configurations to generate such files:

# Webm
ffmpeg -i #INPUT -c:v libvpx-vp9 -c:a libopus video.webm

# MP4
ffmpeg -i #INPUT -c:v libx264 -c:a aac video.mp4