这是一个在使用 WebM 视频进行 Web 开发时非常经典的“坑”。

Safari（以及 iOS 端的所有浏览器）确实不支持使用 VP8/VP9 编码的 WebM 透明视频。 虽然 Safari 在近几年增加了对 WebM 的基本支持，但其内置的解码器在处理透明通道（Alpha Channel）时，依然只认苹果自家的格式。

如果你需要实现跨浏览器的透明视频效果，通常有以下几种成熟的解决方案：

1. 针对 Apple 设备使用 HEVC (MOV)

Apple 支持带有 Alpha 通道的 HEVC (H.265) 编码。你需要为 Safari 准备一个 .mov 文件。

• 实现方式： 在 <video> 标签中提供两个数据源。

1<video autoplay loop muted playsinline>
2  <source src="video.mov" type='video/quicktime; codecs="hvc1"'>
3  <source src="video.webm" type="video/webm">
4</video>

• 注意： 生成这种特定格式的 .mov 比较挑剔。使用 FFmpeg 的转换命令通常如下：

1ffmpeg -i input.mov -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 0.75 -vtag hvc1 output.mov

2. 使用 Canvas 渲染 (Lottie / PixiJS)

如果你的视频是动画类的，可以考虑放弃视频格式，改用 Lottie (JSON) 或 DotLottie。

• 优点： 完美跨浏览器，无损缩放，体积极小。
• 缺点： 不适合复杂的实拍视频。

3. “左右/上下”拼接法 (VFX 常用)

这是一个比较硬核但兼容性极好的办法：将视频的 彩色部分 和 黑白遮罩部分（Alpha Mask） 拼在一张画布上。

• 原理： 视频左半部分是正常颜色，右半部分是对应的黑白 Alpha 通道。
• 实现： 通过 JS 在 <canvas> 上实时读取视频帧，利用右半部分的像素值作为左半部分的透明度进行重绘。

4. 检查 WebM 的编码设置

如果你发现 Chrome 也不行，那可能是编码问题。WebM 的透明背景必须使用 VP8 或 VP9 编码。

• FFmpeg 命令参考：

1ffmpeg -i input.mov -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

(注意：yuva420p 中的 a 代表 Alpha 通道)

建议

如果你目前正在处理的项目需要兼顾性能和兼容性，方案 1（双源视频） 是目前工业界的标准做法。