video - 让 Safari 更喜欢 HTML 5 视频标签中的 HEVC

Question

我目前正在调查为视频添加 HEVC 支持的可行性，但我在使用 Safari 时遇到了问题。这是示例源:

<video autobuffer="true" autoloop="" loop="" controls="">
    <source src="film_WebM.webm" type="video/webm">
    <source src="film_HEVC.mp4" type="video/mp4">
    <source src="film.mp4" type="video/mp4">
</video>

理想情况下，浏览器应该读取源代码并处理它认为可以读取的第一个文件，这应该允许 Firefox 和 Chromium 显示 VP9 电影，Safari 显示 HEVC 和 Internet Explorer 显示 H264。但是，Safari 播放效果不佳，如果存在 H264，它将忽略 HEVC 电影。我试过用编解码器信息注释源，但这没有帮助。将 HEVC 设置为视频元素的默认源适用于 Safari，但会导致所有其他浏览器出现问题。

有没有什么方法可以在不使用特征检测来操作 src 元素的情况下解决这个问题？

作为 Safari 错误提交给 Apple #37821806

下面的讨论表明，尽管 Apple 有自己的发行说明，但 Safari 可能会基于硬件考虑决定使用 AVC 源。它如何在没有编解码器提示或明显的 mime 类型嗅探的情况下设法做到这一点尚不清楚。如果人们可以测试 codepen demo 将会很有用并在注释中注明播放的编解码器和 Mac 硬件信息。

Answer 1

首先确保您的 HEVC 视频编码正确，以便 Safari 可以播放它。通过从视频标签中删除除指向您的 HEVC 视频的源之外的所有源来测试这一点。如果 Safari 播放它，请继续下一步，否则修复视频文件。

一旦您确定 HEVC 视频与 Safari 兼容，请使用 source 标记中的 type 属性向浏览器提供有关编解码器的提示。到目前为止，您只是告诉浏览器 MP4 容器用于 HEVC 和 H.264 源。浏览器必须下载部分文件才能确定哪些文件兼容，通常是按照 source 标记的顺序。

您可以/应该指定所有使用的编解码器的详细信息，包括视频编解码器，如果涉及音频，还包括音频编解码器。

• avc1代表H.264
• hvc1 代表 H.265 (HEVC)

对于您的示例，最短的版本是这样的:

<video>
    <source src="film_WebM.webm" type="video/webm">
    <source src="film_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
    <source src="film.mp4" type='video/mp4; codecs="avc1"'>
</video>

另见:Demo on CodePen

更新

感谢您在评论中的反馈，我想我弄清楚了是怎么回事:Safari 似乎会考虑您的硬件来选择最佳视频源，这实际上非常聪明。对 H.264 的硬件支持已广泛可用，即使在较旧的硬件上也是如此，而 HEVC/H.265 硬件支持则不是，而且需要更多的 CPU，最终也需要更多的能量(电池)。

因此，尽管您的设备(例如 MBP)和软件可以解码和播放 HEVC 视频，但 Safari 可能更喜欢 H.264 视频源(如果可用)。

我又做了一些测试:

• iMac 2014 年末 (5K):✅ HEVC
• iPhone X(iOS 12 测试版):✅ HEVC
• iPhone 7 Plus (iOS 11):✅ HEVC
• 较旧的 iPad Air (iOS 11):⚠️ 更喜欢 H.264，但如果没有 H.264 源可用，将播放 HEVC 视频