适用于所有主要浏览器的视频编解码器

Video Codec for all major browsers

我正在使用

video/mp4

格式并在 'video js' 中使用,这在 chrome 中工作正常,但在 Firefox 中有问题。在控制台中出现以下错误:

不支持 "video/mp4" 的指定 "type" 属性。加载媒体资源 # 失败。

是否有所有主要浏览器(如 Chrome、Firefix、IE 和 Safari)都支持的单一视频编解码器。

提前致谢。

MP4 是一种容器格式,因此放入其中的编解码器也很重要。

Firefox 支持 MP4,其中 H.264 用于视频,AACMP3 用于音频,并且前提是您有可用的第三方解码器。如果您正在寻找一种单一格式来统治它们,那您就不走运了,因为目前有 none.

您处理此问题的方式是将同一内容文件转码为多种格式,并在您的播放器中使用回退机制。

请参阅 Mozilla 上的 Media Formats 页面以了解受支持的内容和位置。例如。 WebMVP9/VP8Vorbis/Opus 适用于 Firefox。

一般来说,回退的工作原理是将同一文件的所有不同版本指定为 <video> 标记的来源。浏览器将选择它可以播放的第一个。

示例来自 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>

如果浏览器无法播放 WebM,它将退回到 MP4

在我的非详尽测试中,我发现 mp4 容器中带有 aac 音频的 h264 视频(使用 ffmpeg 转码)至少适用于以下浏览器:

  • Chrome 80 Android 和 Windows 10
  • iPadOS 和 iOS13.4 以及 MacOS 10.15 上的 Safari
  • Windows10
  • 上的 Internet Explorer 11
  • Android 和 Windows10
  • 上的 Firefox 74
  • Windows10
  • 上的边 80

我在 Ubuntu 18.04 上使用以下 ffmpeg 参数对来自数码摄像机的视频文件进行了编码:

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'

编辑

我发现,奇怪的是,一个 mp3 音频文件在音频标签的 Safari/MacOS 中播放。但是带有 mp3 音轨的视频不会播放音频。