腾讯 MIG 实习期间,第一个有挑战性的项目就是视频理解 demo,主要是使用不同理解模型对视频打标签。我的工作主要是还是为推荐组的同学快速实现一个前端平台对算法进行可视化,功能并不复杂,主要难点是接收用户上传的视频并直接在网页端进行播放。
在网页端直接播放视频在视频格式众多的情况下并不简单,HTML5 原生的 <Video>
tag 仅支持 mp4、ogg 和 webm 格式的视频,后两种非常不常见可以忽略不计,也就是说 mp4 是对于网页端唯一友好的视频格式。后端给出的视频库里还有很多 avi 和 flv 格式的视频,另外还要处理用户自己上传的视频,所以需要调研在网页端直接播放视频的解决方案:
逐个适配
- mp4 直接播放;
- avi 主要是在 windows 播放的视频格式所以直接放弃,让用户自行下载本地播放;
- flv 随着 Flash 的废弃也成为了时代的遗孤,好在还有 Bilibili 开源的 flv.js,简单来说就是使用 JS 解析 flv 直接喂给通过浏览器的多媒体,但是经过测试发现对 flv 的格式还有要求,B 站的 flv 视频自然是可以播放,其他格式不标准的 flv 还是无可奈何。
统一转码
说要转码我一开始是拒绝的,毕竟转码又要耗费额外的时间,但是使用 FFmpeg 之后经过测试发现对大多数不到一分钟的短视频进行转码时间几乎可以忽略不计,而且兼容各种视频,简直是视频银弹。此外要注意,转码成 HTML5 能播放的 mp4 视频需要 libx264 库,然而 ffmpeg 编译版本并不自带而且尝试手动加入 libx264 库再编译也失败了,直接使用集成了很多库的 Static Builds 版本才是王道。
选择了统一转码方案之后只需要对用户上传的视频格式进行判断,mp4 直接播放,其他格式统一转码成同名 mp4 视频再播放,这样不管用户上传什么格式的视频都能直接在网页端播放啦~