如何在 HTML5 视频源类型属性中指定 HEVC 编解码器？答案

【问题标题】：How do I specify the HEVC codec in the HTML5 video source type attribute?如何在 HTML5 视频源类型属性中指定 HEVC 编解码器？
【发布时间】：2018-05-02 10:54:11
【问题描述】：

我想在支持它的网络浏览器上加载和播放较小的 HEVC 编码视频。

我在支持 HEVC 格式的 Safari 11 (macOS 10.13) 上使用此代码。

<video muted playsinline autoplay>
    <source src="clip.webm" type="video/webm; codecs=vp9">
    <source src="clip-hevc.mp4" type="video/mp4; codecs=hevc">
    <source src="clip.mp4" type="video/mp4; codecs=avc1">
    <p>Video not supported</p>
</video>

在 Web Inspector > 网络面板中，我看到 Safari 加载了 clip.mp4 和 clip-hevc.mp4。如果我检查视频元素，我会看到 clip.mp4 正在播放，而不是 clip-hevc.mp4。我在 iOS 11 上看到了同样的情况。

当我在我指定的类型上调用 HTMLMediaElement.canPlayType() 时，我得到了

maybe video/mp4; codecs=hevc
probablyvideo/mp4; codecs=avc1
没有关于我见过的 HEVC 编解码器变体（例如，hvc1、hev1）

我注意到的另一件事：当我删除 clip.mp4 选项时，clip-hevc.mp4 下载并播放正常！

如何确保只有最受支持的 MP4 变体在浏览器中下载和播放？

【问题讨论】：

您是否尝试过将 hevc 剪辑放在源列表的首位？
@Offbeatmammal 是的，那没用
我也遇到了同样的问题。看起来苹果没有正确地考虑到这一点。我想知道网站管理员部分是否是一个更好的地方？
@CharlieClark 好电话，转发here

标签： html video ffmpeg safari hevc

【解决方案1】：

在 iOS14 type="video/mp4; codecs=hevc" 中发现的仅供参考不再起作用。 type="video/mp4" 和 type="video/mp4; codecs=hvc1" 确实

【讨论】：