我应该为 HTML <video> 使用哪种视频格式/编解码器来支持实际的最新主要浏览器？

Question

我看到其他涉及同一主题的问题：

• 应使用什么 HTML5 视频编解码器？
• 我应该使用哪种视频和音频格式/编解码器？

但是他们已经很老了，在这个主题上更新信息我认为是至关重要的。

我现在正在使用

video/webm;codecs=vp9

，但我在使用某些浏览器时遇到问题

那么我应该提供什么格式/编解码器版本的视频来支持 Windows、Linux、Mac、Android 和 iOS 中主要浏览器的最新版本？

我使用 MediaRecorder 在浏览器中生成视频，因此如果可以使用此系统生成建议的格式/编解码器，这将节省我在服务器上重新编码的额外步骤。

如果您有

ffmpeg

命令配置来生成格式/编解码器，这也会对我有帮助。

Answer 1

正如@Offbeatmammal 在他/她的评论中建议的那样，我们可以在这里看到视频编解码器的实际兼容性：

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

但具体答案的信息量巨大且难以消化。

我们来自 developer.mozilla.org 的朋友有一些具体的建议，我希望他们能得到更新：

• 使用 VP9 视频编解码器和 Opus 音频编解码器的 WebM 容器
• MP4 容器和 AVC (H.264) 视频编解码器，最好使用 AAC 作为音频编解码器

结果：

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

这些是生成此类文件的

ffmpeg

最基本的配置：

# 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

Answer 2

如果质量对您来说并不重要，而您想要的只是呈现音频/视频，那么我编写的一个函数可能会有所帮助

export const getDefaultCodec = mimeType => {
  const codecMap = {
    'video/webm': 'vp9',
    'video/mp4': 'avc1.42001E',
    'audio/aac': 'mp4a.40.2',
    'audio/opus': 'opus',
    'audio/mp3': 'mp3',
    'audio/mpeg': 'mp3', // Alternate MIME type for MP3 audio
    'video/ogg': 'theora',
    'audio/ogg': 'vorbis',
    'video/quicktime': 'h264',
    'audio/wav': 'pcm',
    'audio/flac': 'flac',
  }

  return codecMap[mimeType] || ''
}