HTML 5 视频标签可以有多个具有不同编解码器的 MP4 源吗？答案

【问题标题】：Can a HTML 5 video tag have multiple MP4 sources with different codecs?HTML 5 视频标签可以有多个具有不同编解码器的 MP4 源吗？
【发布时间】：2014-03-27 20:39:16
【问题描述】：

我正在考虑这样一个事实，即我们使用的 MP4 配置文件越高，视频质量就越好......

这让我想到了一个我想问专家的问题！

一个 HTML 5 视频标签可以有多个具有不同编解码器的 MP4 源吗？比如：

<video>
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="high.mp4" type='video/mp4; codecs="avc1.64001E, mp4a.40.2"' />
    <source src="main.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
    <source src="baseline.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"' />
</video>

第一个 MP4 视频是高配置视频，第二个主要配置文件和第三个基线配置文件。

在 iPhone 3G 上，会播放基线版本吗？

在 iPhone 4S 上，会播放高音吗？

一个后续问题：如果高配置视频低于源列表中的基线配置视频，哪一个将在 iPhone 4G 上播放？

（感谢您的阅读，尤其是如果您回复的话。:)

【问题讨论】：

标签： html video mp4

【解决方案1】：

According to Mozilla, <video> 可以包含任意数量的<source> 标签。此外，应该播放与当前设备/浏览器兼容的视频文件的第一个源标签。

Apple themselves confirm <source> 标签应该是开发人员首选的失败顺序，我假设 Mobile Safari 也会选择它可以播放的第一个文件.

因此，据我所知，对于特定的浏览器/设备组合，不存在为特定文件选择特定文件的静态方法。您可能必须根据提供的用户代理字符串进行一些检测，并且只提供正确的文件（但这对于纯 HTML 是不可能的）。

【讨论】：

【解决方案2】：

你可以提供几个源标签，用户代理应该播放它可以处理的第一个。

参见 W3C 定义：http://www.w3.org/TR/html5/embedded-content-0.html#the-source-element

还有一个用于后备的 javascript 示例。

http://www.w3.org/TR/html5/embedded-content-0.html#mime-types 展示了一些 javascript，您可以如何测试浏览器是否可以播放特定的编解码器。

【讨论】：

【解决方案3】：

可以使用该元素指定多个源文件，以便为不同的浏览器提供以不同格式编码的视频或音频。例如：

<video controls> 
    <source src="foo.ogg" type="video/ogg">  <source src="foo.mp4" type="video/mp4">
    Your browser does not support the <code>video</code> element.
</video>

【讨论】：