HTML5透明视频跨浏览器/系统高兼容实现及Safari15异常问题咨询

注意：我们曾尝试用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不支持
  因此我们让浏览器自行选择适配的视频版本加载。

存在的问题 #

实际使用中该方案的稳定性存在不一致的情况：比如我当前使用MacOS Catalina系统、Safari 14.0.2浏览器时，采用上述方案可以正常加载视频；但我在Parallels虚拟机中运行MacOS Monterey系统、使用Safari 15.1测试时，视频完全无法加载；不过我们团队另一名直接升级到Monterey系统、使用同版本Safari 15.1的开发人员却可以正常加载视频。

目前我没有更多排查思路，恳请大家提供帮助。

问题排查与解决方案 #

1. 优先排查虚拟机环境限制
   带alpha通道的HEVC解码强依赖Apple原生硬件的VideoToolbox硬件加速能力，Parallels等虚拟机对macOS客户机的硬件解码能力默认有阉割，绝大多数情况下虚拟机内的macOS无法正常调用硬件解码能力，而带alpha的HEVC软解码支持度极低。你可以先在虚拟机内用QuickTime直接打开转好的mov文件，如果QuickTime也无法正常播放，即可确定是虚拟机环境的问题，不影响物理真机用户的实际体验。

2. 优化转码参数提升兼容性
   你当前使用的硬件编码器参数有可优化空间，补充如下参数可以提升Safari 15的兼容性：

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

新增的-profile:v main10和-pix_fmt yuva420p会明确指定编码格式符合Safari对带alpha HEVC的规范要求，避免不同硬件编码器默认参数不一致导致的兼容问题。

3. 添加异常降级逻辑
   可以为video标签添加error事件监听，当Safari加载mov文件失败时，自动降级显示兜底的静态png图或者非透明视频，避免页面出现空白区域。

内容的提问来源于stack exchange，提问作者Will Ashworth