Android平台透明视频播放方案

2,719 阅读4分钟

效果图:

Demo apk:

github.com/zxzx74147/E…

一、方案框架:

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库做解码操作,暂时不支持硬解码,目前看解码性能没有问题。后续可以考虑加入硬解码提升性能。

四、使用方法

github.com/zxzx74147/E…

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

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

六、附录:

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

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