效果图：

一、方案框架：

ExoPlayer播放器  +  vp9编码  +  webm封装

二、使用场景：

礼物特效、弹屏广告、动态贴纸等

三、方案对比

1、webm透明视频 vs gif、webp、apng

gif、webp、apng之间的对比这里略过，从编码质量到平台支持角度考虑（gif质量太差、apng平台支持太差），这里面webp比较有可比性，webm和webp都是Google的，只不过一个是视频，一个是图片。webm是vp8或者vp9编码，webp是vp8编码，vp9的压缩率更高一点。

相较于使用webp实现相关功能

本方案有几个优点，一、支持流式播放，就是边下边播，也不用全量载入内存；二、支持音轨，不用为了加背景音再使用一个音频播放器，也就不用考虑音画同步问题；三、基于视频的控制逻辑，比如说进度条控制、速度控制、事件回调等成熟的接口。四、相比图片格式时间长度和文件大小基本没有限制。缺点也有，就是视频格式比较“重”，使用起来稍微繁琐一点。

2、webm透明视频 vs SVGA、Lottie

SVGA（YY）、Lottie（Airbnb）这类基于Native Api绘制的方案现在也是一个非常主流的动画实现方案，动画的表现力与开发的便捷性相较于用View做动画会有质的提升。但是在我们的使用过程中也遇到了一些问题。

SVGA、Lottie方案有几个缺点，这也促使了我们透明视频方案的诞生：一、表现力还是不够丰富，一些比较复杂的粒子效果可能引发卡顿，还有3D效果无法实现（只能做仿射变换的伪3D）；二、对于上面的问题，导致很多动画效果使用了大量的帧动画，导致文件变大，加之没有视频或者webp的边解码边渲染的机制，所有帧都要解码为Bitmap，导致累非常严重的内存问题，OOM概率提升；三、对于开发工具的限制，一般是要用Adobe AE，而且对于特性的支持都不够完整（Lottie会好一点）。

webm相较于SVGA、Lottie方案，最大的缺点是无法支持动态内容，比如说动态图片替换、动态文字替换、元素编辑等高阶功能。优点是表现力强，没有性能问题，只要做出来的效果都可以无脑转为视频格式播放。

3、webm透明视频 vs 视频左右分屏方案

这两个方案本质上没有什么区别，都是原始RGB信息+Alpha信息分开存储再渲染方案，Alpha信息都是冗余存储在RGB三通道数据中。webm方案的一个好处是Alpha以一个payload方式存储，原始视频信息不变，即使用未修改的Exoplayer也能播放出不透明效果的视频，不用再过多的修改Render层的逻辑，对播放器的修改较小，使用起来比较优雅，视频符合webm标准，可以在chrome内核浏览器中直接使用。视频左右分屏方案一般是左RGB、右Alpha，需要写一些shader代码去做渲染，透明视频和非透明视频分两套渲染逻辑，用起来稍繁琐，而且在非修改播放器中无法正确渲染。

为保证最小修改原则，目前本方案使用的是Exoplayer 的vp9扩展，它用libvpx库做解码操作，暂时不支持硬解码，目前看解码性能没有问题。后续可以考虑加入硬解码提升性能。

四、使用方法

https://github.com/zxzx74147/ExoPlayer

基于Exoplayer修改，未改变任何api调用方式，修改点可参考提交记录，改动不大，具体使用见github说明。

可以源码编译引入，也可以直接使用基于分支r2.11.8-transparency生成的aar。

六、附录：

1、ios13+基于hevc的透明视频播放方案：    https://developer.apple.com/videos/play/wwdc2019/506/

2、ffmpeg转换命令（注意加粗部分）：

ffmpeg -i /path/input/file.mov -vf scale=640:360 -b:v 1.5M -c:v libvpx-vp9  -vcodec libwebp /path/output/file.webp