macos - 具有最佳跨浏览器/系统支持的 HTML5 透明视频

Question

我在获取具有 alpha 透明度的视频以可靠地在网页上加载和播放时遇到了问题。经过一些彻底的研究，这就是我最终作为一种视频编码方式来实现透明视频的地方，这种透明视频不会覆盖纯色背景。

希望广大社区能够深入了解为什么我们注意到 Safari 15 中 MacOS Monterey 的异常情况🤷‍♂️

注意:我们尝试将 Lottie 作为动画的选项，但我们发现 DOM 过于臃肿；这将不可避免地导致网站出现性能问题。所以我们又回到视频作为一种选择。

使用 alpha 转换为 HEVC

ffmpeg -i "source.mov" -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 1 -vtag hvc1 output.mov

使用 alpha 转换为 VP9

ffmpeg -i "source.mov" -c:v libvpx-vp9 output.webm

将这些文件提供给浏览器的 HTML5 方法

<video autoplay loop muted playsinline class="tmpl-front-page__transition-item tmpl-front-page__transition-item--0 tmpl-front-page__transition-item--banner-video">
    <source src="path/to/video.mov" type='video/mp4; codecs="hvc1"'>
    <source src="path/to/video.webm" type="video/webm">
</video>

工作原理

基本上，我们学到了以下内容:

• Safari 支持 HEVC alpha，Chrome 不支持
• Chrome 支持带 alpha 版的 VP9，Safari 不支持

现在我们让浏览器选择它想要使用的版本。

有问题

这在现实中的可靠性如何存在不一致。例如，我目前正在运行带有 Safari 14.0.2 的 MacOS Catalina，使用上述方法时视频开始为我加载。

在 Parallels VM 中使用 Safari 15.1 测试 MacOS Monterey 时，视频根本无法加载。也就是说，我们团队中的另一位开发人员确实冒险并升级到 Monterey 并拥有 Safari 15.1；他可以看到视频加载得很好。

这有点傻，我不确定还能尝试什么。感谢您的帮助!

Answer 1

最近我一直在研究这个问题，并通过首先在 After Effects 中导出 Apple ProRes 4444，然后将该文件用作 hevc 编码的输入，实现了始终如一的视频文件。 p>

我已经在这个专用页面上写下了我的全部见解:

https://transparent-videos-for-all.vercel.app/

它已经用这些组合进行了测试 👇 并且运行良好。

您可以试试这些演示文件 Sample Webm Sample Mov