【附源码】跨界救场：如何用纯前端的方式获取视频首帧

摘要

最近在搬砖时遇到一个问题，在商详页面有些商品只有视频，没有封面图。

我们的交互是用户点击视频封面图调用 native 播放器播放视频，没有封面图视频就没有了载体，就不能展示了。

这个问题有3个解决方案

1. 后端处理：这种方案虽然可行，但是会影响接口性能，在商详这种关键页面得不偿失。
2. 客户端处理：客户端处理需要在进入商详页面前预加载视频，会影响页面响应速度，也不太合理。
3. 前端处理：前端处理必然会用到 video 标签来承载视频，考虑到 video 标签在移动端会有很多兼容性问题，处理起来很复杂，同时也会带来加载的性能消耗。

基于上述三个方案，我们决定在源头解决这个问题，在创建商品时动态获取视频封面并保存。