CODEWITHSUNDEEP
htmlhtml5-videovideo-codecs
fguillen
fguillen

Reputation: 38772

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

I see other questions addressing the same subject:

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.

Upvotes: 2

Views: 2222

Answers (2)

ashuvssut
ashuvssut

Reputation: 2275

If mime codec is unknown, and if quality doesn't matter to you and all you want is to just present the audio/video, here's a function i have written that might help

const getDefaultCodec = mimeType => {
  const codecMap = {
    'video/webm': 'vp9',
    'audio/webm': 'opus',
    'video/mp4': 'avc1.42001E',
    'audio/mp4': 'mp4a.40.2',
  }

  return codecMap[mimeType] || ''
}

export const getDefaultCodecMime = mimeType => {
  const codec = getDefaultCodec(mimeType)
  if (codec) return `${mimeType}; codecs="${codec}"`
  else return mimeType
}

Upvotes: 0

fguillen
fguillen

Reputation: 38772

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

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

Upvotes: 3

Related Questions