使用 FFmpeg 将视频转换为透明 WebP 动图

在现代网页设计和移动应用开发中，带有透明效果的动图越来越受欢迎。无论是 UI 界面的过渡动画、产品展示的浮层效果，还是游戏中的特效动画，透明动图都能提供更加精美和专业的视觉体验。

传统的 GIF 格式虽然应用广泛，但它只支持单色透明（即某个特定颜色完全透明），无法实现真正的半透明效果。而 WebP 格式不仅支持完整的 Alpha 透明通道，还具有更好的压缩效率和画质表现。

本文将详细介绍如何使用 FFmpeg 将带透明通道的视频转换为 WebP 动图，完美保留所有透明和半透明效果。

GIF vs WebP：透明支持对比

GIF 格式的局限性

GIF 支持的"透明"仅限于单色透明（即某一个颜色像素可以设置为完全透明），而不像 WebP、PNG 那样支持**多级 Alpha（半透明）**效果。

WebP 格式的优势

✅ 支持完整的 Alpha 透明通道
✅ 支持 0-255 级别的半透明效果
✅ 更好的压缩效率
✅ 更高的画质表现
✅ 现代浏览器广泛支持

提示：如果你的视频不需要透明效果，可以参考「使用 FFmpeg 将视频转换为 GIF 动图」来生成更通用的 GIF 格式。

基本转换命令

标准转换（保留透明通道）

ffmpeg -i input.webm \
  -vf "scale=512:-1,fps=15" \
  -c:v libwebp \
  -lossless 1 \
  -preset default \
  -qscale 100 \
  -pix_fmt yuva420p \
  -loop 0 \
  output.webp

简化版本

ffmpeg -i input.webm -c:v libwebp -pix_fmt yuva420p -loop 0 output.webp

参数详解

参数	作用	说明
`-vf "scale=512:-1,fps=15"`	视频滤镜	`scale=512:-1`：宽度缩放到512px，高度自动等比例 `fps=15`：设置帧率为15fps
`-c:v libwebp`	视频编码器	使用 WebP 编码器
`-lossless 1`	无损压缩	启用无损压缩（画质最高，文件较大）
`-qscale 100`	质量设置	质量级别 0-100，数值越高质量越好
`-pix_fmt yuva420p`	像素格式	关键参数：使用带透明度的像素格式
`-loop 0`	循环设置	0=无限循环，1=播放一次，N=循环N次
`-preset default`	编码预设	可选：`default`、`picture`、`photo`、`drawing`、`icon`、`text`

实用示例

1. 高质量无损转换

ffmpeg -i transparent_video.webm \
  -c:v libwebp \
  -lossless 1 \
  -qscale 100 \
  -pix_fmt yuva420p \
  -loop 0 \
  output.webp

2. 指定尺寸和帧率

ffmpeg -i input.webm \
  -vf "scale=800:-1,fps=20" \
  -c:v libwebp \
  -lossless 1 \
  -pix_fmt yuva420p \
  -loop 0 \
  output.webp

3. 压缩优化版本

如果文件过大，可以关闭无损压缩：

ffmpeg -i input.webm \
  -c:v libwebp \
  -qscale 80 \
  -preset picture \
  -vf "fps=15" \
  -pix_fmt yuva420p \
  -loop 0 \
  output.webp

4. 从指定时间段转换

ffmpeg -i input.webm \
  -ss 00:00:05 \
  -t 00:00:10 \
  -vf "scale=600:-1,fps=12" \
  -c:v libwebp \
  -qscale 85 \
  -pix_fmt yuva420p \
  -loop 0 \
  output.webp

质量与文件大小平衡

高质量设置（文件较大）

-lossless 1 -qscale 100 -vf "fps=20"

标准质量设置（推荐）

-qscale 85 -preset picture -vf "fps=15"

压缩优先设置（文件最小）

-qscale 70 -preset default -vf "fps=10"

重要注意事项

1. 源视频必须包含透明通道

⚠️ 关键提醒：如果源视频（如 .webm、.mov）本身不包含透明通道，转换后的 WebP 也不会"自动"产生透明效果。你需要确保原始视频文件确实包含 Alpha 通道数据。

2. 像素格式的重要性

-pix_fmt yuva420p 是保留透明通道的关键参数。如果省略此参数，透明效果可能会丢失！

3. 支持的输入格式

常见支持透明通道的视频格式：

.webm（VP8/VP9 编码）
.mov（ProRes 4444、Animation 编码）
.avi（某些编码）

常见问题解答

Q: 转换后的 WebP 没有透明效果怎么办？ A: 检查以下几点：

确认源视频确实包含透明通道
确保使用了 -pix_fmt yuva420p 参数
使用 ffprobe 检查源视频的像素格式

Q: 如何检查视频是否包含透明通道？ A: 使用以下命令检查：

ffprobe -v quiet -show_streams -select_streams v:0 input.webm

查看输出中的 pix_fmt 字段，包含 yuva 或 rgba 的格式通常支持透明。

Q: WebP 动图在某些浏览器不显示怎么办？ A: WebP 格式在现代浏览器中支持良好，但对于老旧浏览器，建议提供 GIF 格式作为备选方案。

Q: 如何进一步优化文件大小？ A: 可以尝试：

降低帧率：-vf "fps=10"
减小尺寸：-vf "scale=400:-1"
调整质量：-qscale 70
使用不同预设：-preset drawing

浏览器兼容性

WebP 动图的浏览器支持情况：

✅ Chrome 32+
✅ Firefox 65+
✅ Safari 14+
✅ Edge 18+
❌ Internet Explorer（不支持）

总结

使用 FFmpeg 将视频转换为透明 WebP 动图是一个强大且灵活的解决方案。通过合理配置参数，你可以在保持完美透明效果的同时，获得理想的文件大小和播放质量。

记住最关键的两点：

确保源视频包含透明通道
使用 -pix_fmt yuva420p 参数保留透明信息