前端进入深水区，视频自定义截帧

短视频内容是淘宝内容分发的核心，需要创作者创作高质量的视频内容。封面图是影响视频点击的核心因素。我们提供了智能封面图之后还是存在将近20%的用户选择主动上传封面图。为了优化这一个操作，提供视频自定义截取功能。

技术调研

由于淘宝目前的链路，我们只能在浏览器上做视频解析的操作，这也给到前端一些机会。社区上存在两种自定义截帧的方案，一种是使用video+canvas，一种是用FFmpeg+WebAssembly。

FFmpeg 是视频处理最常用的开源软件。它功能强大，用途广泛，大量用于视频网站和商业软件（比如 Youtube 和 iTunes），也是许多音频和视频格式的标准编码/解码实现。FFmpeg 本身是一个庞大的项目，包含许多组件和库文件。

WebAssembly 作为前端其实不陌生了，顾名思义，就是“网页”、“汇编”，即在网页跑汇编程序的能力。

两种方式的弊端

使用video的方式进行截取，需要等视频加载，有网络的耗时，大文件等待时间过长。video标签对视频兼容性不好，非mp4的视频，h265的视频都无法解析。

从目前的数据来看，中小文件占比比较高，虽然FFmpeg能力很强，但是用FFmpeg对于小文件来说太重了，整体体验不好。

方案测试

我们用大小不同的视频去测试了这两种方案，最后得出以下结论：H264的视频，视频大小在150M以下的，使用video的方式去解析，超过150M的使用FFmpeg去解析。选取了视频中的某一帧，统一用FFmpeg去解析（从性能跟工程上的复杂度做的平衡）。

具体实现

我们提供出去的交互原型如下图所示，【视频进度滑轨】用来选择某一帧，【预览区域】用来展示用户选择的某一帧。

视频滑轨的生成是整个项目的核心，如果我们每一秒都截一个图，整个生成的时间会超长。我们参考了IOS系统相册视频预览的交互。按照视频时长平均分为8段，取每一段的第一帧分别截个图。最后用canvas把这八张图合成一张，作为视频进度条滑轨。用户把标记移到某一个位置，计算当前标记在进度条的比例，换算为视频对应的时间，最后截取那一帧。

PS. FFmpeg截帧提速的一个小点，把-ss命令放在最前面，比一般的截图更快。

整体流程

未来优化

未来的优化从效率，效果两个点进行提升。从我们的流程上看，我们会等N张图片生成好之后才展示组件。虽然说从我们的测试数据来看不会耗时太久（3-5s），但是我们可以把这个改成异步的逻辑，先生成头尾两张图，然后慢慢的把中间的图给展示出来。能把耗时控制在2s内。减少用户耗时，优化用户体验。

我们借助机器学习的能力，沉淀内容智能AI，实现浏览器端智能。在端上进行封面的推荐，让创作者更高效的完成封面图的选取。在内容消费侧（用户浏览内容）使用AB test，让内容的点击率做到较大的提升。通过技术赋能业务，实现内容创作的提高。

往期推荐