透明视频简单实践
去年写的一份工作笔记，刚好前段时间接触新项目又拓展了一些相关内容，简单分享一下。
去年在进行一款 Web 平台产品的设计时，曾经有过一个需求是希望支持透明的视频。在查阅了一些关于能保留 Alpha 通道的视频格式资料后，得知了目前能支持的只有 MOV 和 WebM 格式。
QuickTime 格式 (.mov)
首先进行验证的是 MOV 格式。在 AE 中对视频进行处理（删除了中央区域的内容）后，选择 QuickTime 格式 (.mov)，设置保留 Alpha 通道 渲染导出。
效果验证
预览导出的视频，可以看到在 AE 中被我处理成透明的区域带有熟悉的纹理，这时候可以认为这个视频是带有 Alpha 通道的，第一步验证成功（至于为什么不用浏览器的方式验证下面会说到）。
但是导出的视频虽能保留 Alpha 通道，但存在两个问题：
- 视频体积过大：测试视频时间 9s，尺寸 414736px，导出后大小 9.6MB，对于一个需要在 Web 端使用的视频素材来说，并不算一个优秀的大小。
- Web 平台支持的编码格式有限：在 AE 中使用默认设置导出的 MOV 视频编码格式为 QuickTime Animation，同时也是 QuickTime RLE（故以下两图使用不同软件处查看到的编码信息不冲突）。而 Web 平台支持的编码格式有限，直接把该 MOV 视频拖放到浏览器中无法直接播放。对 Windows 电脑来说，不安装其他解码器的情况下也无法打开该视频。
参考链接：
在浏览器播放视频，可以使用 HTML5 原生的 video 标签。但其播放的格式使用一定限制的， 目前 video 只支持三种格式：WebM、Ogg、MP4。 WebM：WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。
Ogg ：Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器。
MP4：MPEG 4 文件使用 H.264 视频编解码器和 AAC 音频编解码器。
参考链接： https://zhuanlan.zhihu.com/p/341055144
一个可能不需要验证的推测： 根据 这份参考 显示，MOV 格式可支持 H.264 编码格式，但 H.264 编码格式并不支持 Alpha 通道，所以把从 AE 导出的带 Alpha 通道的 MOV 文件转到 H.264 编码也是不可行的。
WebM 格式
和开发简单讨论之后，关注到了 WebM 格式同样支持 Alpha 通道，而且在 Web 端兼容性也较好。 AE 不支持直接导出 WebM 格式，目前有几个方式导出 WebM 格式的视频：
- WEBM 插件：一个支持 Pr 与 Me 的插件，大致处理步骤：
- 下载安装
- 在 AE 把合成添加到 AME 中渲染
- 选择 WebM 格式，勾选保留 Alpha 通道后导出
- FFmpeg：FFmpeg 是一个开放源代码的自由软件，可以运行音频和视频多种格式的录影、转换、流功能。这个太出名了，就不多说了。大致处理步骤：
- 其他在线工具，如： Convertio
效果验证
WebM 插件与 FFmpeg
本地预览，以下为转换前后的本地播放器预览截图，看上去似乎没有 Alpha 通道。
拖放到浏览器后修改背景颜色，确认带有 Alpha 通道。
在线工具
测试后发现并不可行（如下图所示），更多其他在线工具未进行测试。
MOV 格式遗留问题有没有解决？
- 大小：经过不同方式转换后的视频大小为分别为 103KB，584KB，相对于 MOV 格式，视频体积大幅减少。
- Web 平台支持：
- 测试 1：直接拖放到浏览器中可直接播放；
- 测试 2：Safari 对 WebM 格式的支持并不理想，仅支持 VP8 编码，不支持 VP9 编码，且对系统要求比较高，需求系统版本 macOS 11.3 以上。
参考资料：
Apple adds WebM video playback support to Safari with macOS Big Sur 11.3
Can Your Browser Play WebM Video?
结论
AE 设计后，使用 AME （Adobe Media Encoder）渲染为 VP8 编码格式的 WebM 视频可保留 Alpha 通道，压缩率优秀且能兼容大部分浏览器使用。
假透明视频
除了上面聊到的格式外，目前还有很多「假」透明视频的做法，也是直播行业中做透明动画成熟的方案。 其原理可以简单解释为：在同一个视频同时放置原视频和原视频的 Alpha 通道蒙版，通过解析右侧的黑白区域来「抠」出左侧的原视频对应区域（见下图）。
这种做法的好处有很多，比如：
- 已有很多行业成熟的开发设计方案，对多平台有更好的兼容性；
- 不需要受限于特殊的编码格式，可以正常使用 H.264 编码；
再具体就不聊了，下面的两个成熟方案里有对于这种透明视频有更加详细的说明，同时也配套了有对应的设计开发工具，有兴趣的可以进一步了解。
YYEVA：YYLive 推出的一个开源的支持可插入动态元素的 MP4 动效播放器解决方案。
AlphaPlayer：字节推出的解决方案。
因为用得不多，我是手动拼的 :D