我遇到了一个问题，就是如何让具有阿尔法透明度的视频在网页上可靠地加载和播放。经过一些彻底的研究，我最终找到了一个视频编码的方法，以完成透明的视频，而不是在一个纯色的背景上。
希望广大社区能洞察到为什么我们在Safari 15中注意到MacOS Monterey的怪异现象 🤷♂️
注：我们尝试用Lottie作为动画的一个选项，但我们发现DOM过于臃肿；这将不可避免地导致网站的性能问题。所以我们又回到了视频这个选项上。
转换为带阿尔法的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支持带阿尔法的HEVC，Chrome不支持
Chrome支持带阿尔法的VP9，Safari不支持