vue 截取视频第一帧

最近自己写项目，在项目中涉及功能点又截取视频帧的点；需求澄清：移动端封面展示，平台上传图片（多张上传）取第一张上传图片为封面图；如上传视频则截取视频第一帧作为封面图；

实现思路；h5 video标签，canvas；上传视频成功之后把返回视频地址放到video标签内，通过canvas画布截取视频第一帧；

组件代码：

image.png image.png image.png image.png image.png

主要代码=》截取视频第一帧：

image.png

视频预览：

image.png

效果：

image image