问具有最大跨浏览器/系统支持的HTML5透明视频

EN

我遇到了一个问题，获取具有alpha透明度的视频以可靠地在网页上加载和播放。经过一些深入的研究，这是我作为一种视频编码的手段，以实现透明的视频，而不是一个坚实的背景颜色。

希望广大社区能够洞悉为什么我们会注意到MacOS蒙特利在Safari 15‍♂️中的怪异之处

注意:我们尝试了Lottie作为动画的一种选择，但是我们发现DOM过度膨胀，这将不可避免地导致网站的性能问题。所以我们把录像作为选择。

转换为带alpha的HEVC

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

用α转换为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，Chrome的HEVC
• Chrome支持带alpha的VP9，Safari不支持

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

有一些问题

这在现实中的可靠程度是不一致的。例如，我目前正在使用Safari14.0.2运行MacOS Catalina，当使用上面的方法时，视频开始为我加载。

当使用Safari15.1在并行VM中测试MacOS蒙特利时，当我这样测试时，这个视频根本不加载。尽管如此，我们团队的另一位开发人员确实尝试了一下，升级到了蒙特利，并拥有了Safari 15.1；他可以看到视频加载得很好。

这有点傻了，我不知道还能尝试什么。谢谢你的帮助！