我目前正在研究在视频中添加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的错误#37821806

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

最佳答案

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

确定HEVC视频与Safari兼容后,请使用type标记中的source属性为浏览器提供有关编解码器的提示。到目前为止,您只告诉浏览器HEVC和H.264源都使用了MP4容器。浏览器将不得不下载文件的一部分,以便找出哪些文件兼容,通常是按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 CodePenarticle

    更新

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

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

    我做了更多测试:
  • iMac 2014年末(5K):✅HEVC
  • iPhone X(iOS 12 beta):✅HEVC
  • iPhone 7 Plus(iOS 11):✅HEVC
  • 较旧的iPad Air(iOS 11):⚠️更喜欢H.264,但如果没有可用的H.264源,将播放HEVC视频
  • 关于video - 让Safari在HTML 5视频标签中更喜欢HEVC,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48902078/

    10-09 07:37