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

【问题标题】：HTML5 transparent video with the greatest cross-browser/system support具有最佳跨浏览器/系统支持的 HTML5 透明视频
【发布时间】：2022-06-22 17:09:38
【问题描述】：

我在获取具有 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 支持带 alpha 的 HEVC，Chrome 不支持
Chrome 支持带有 alpha 的 VP9，Safari 不支持

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

有问题

这在实际工作中的可靠性并不一致。例如，我目前正在使用 Safari 14.0.2 运行 MacOS Catalina，并且使用上述方法时开始为我加载视频。

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

这有点愚蠢，我不确定还有什么可以尝试的。感谢您的帮助！

【问题讨论】：

可能是VM的原因？你的队友试了什么？

标签： macos ffmpeg html5-video alpha-transparency

【解决方案1】：

最近我一直在对此进行大量研究，并通过首先在 After Effects 中导出 Apple ProRes 4444，然后将该文件用作 hevc 编码的输入，从而实现了始终如一的工作视频文件。

我已在此专用页面上写下我的全部见解：

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

并且已经使用这些组合进行了测试?，效果很好。

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

【讨论】：