DTeam 技术日志

Doer、Delivery、Dream

探究微信小程序 Video 组件的视频兼容性

冯宇 Posted at — Jul 9, 2020 阅读

最近手头有个小项目,需要在微信小程序播放视频,看到微信小程序已经提供了一个 video 组件,本以为这个需求非常容易实现。实际使用却发现了这个组件的视频支持程度非常差劲,而且官方文档对于编码参数压根没提,导致走了很多弯路,各种黑屏或者无声音,浪费了差不多一天的时间才全部搞定。于是决定记录下来处理的过程和我测试过的兼容性列表,方便未来查阅。

video 组件的兼容性探索

首先先看看官方文档是怎么说的。这里摘录出官方文档的表格:

支持的格式:

格式 iOS Android
mp4
mov x
m4v x
3gp
avi x
m3u8
webm x

支持的编码格式:

格式 iOS Android
H.264
HEVC
MPEG-4
VP9 x

是不是觉得这个表格太简略了点?而视频播放和兼容性的问题在微信官方的开发者论坛中问的人相当多,我自己在开发中也遇到了很多黑屏或者无声音的问题。

这个表格缺少了两个重要的参数:

由于这么重要的兼容性参数官方没有提供,于是我决定自己摸索。

注: m3u8 为播放列表文件,实际能否播放还是得看播放列表中每个视频片段是否支持

video 组件(mp4)兼容性测试

花了将近一天的时间,我自己做了各种尝试,完善了一下兼容性测试。首先由于 iOS 和 Android 都支持mp4,因此我主要测试了 mp4 支持的音频和视频编码,以及相关规格,最终整理成下文的表格,手头只有 Android 设备,没有 iOS 设备,未在 iOS 上测试。

视频编码 profile Android
H.264 8bit
H.264 10bit
HEVC 8bit
HEVC 10bit
HEVC 12bit

音频编码 profile Android
AAC LC
AAC HE
AAC HE_V2
MP3 /
AC3 /
Opus /

综上,为了照顾尽可能多的设备的兼容性,应该选择H.264 8bit + AAC LC编码的mp4视频。

另: 对于使用了类似于ffmpeg-copyts之类的参数 seek 时间戳的视频也是不支持的,会黑屏

小结

本文总结了下微信小程序的video组件的兼容性列表,方便其他人参考,以便少踩坑。

最后,如果使用ffmpeg进行处理的话,这里给出参考命令行:

ffmpeg -i input_video.mkv -c:v libx264 -pix_fmt yuv420p -c:a aac output.mp4

这里仅作演示,最小化参数,实际建议根据自己的情况调整参数

如果某些视频的视频/音频编码本来就符合兼容性要求,那么对应的轨道也可以考虑直接使用copy方式避免转码


相关文章