【实战技巧】前端播放本地视频并实现截图功能（上）

前言

最近公司有新的需求，大致描述为需要用户上传本地文件，然后可以在网页进行播放，同时可以对播放中的视频进行截图，最后把截图下载到本地。

由于之前没有这块的知识储备，所以也是边摸索边实现。特此把探索过程记录下来，方便日后复习，也或许能帮到其他有需要的小伙伴。

本文基础前端框架为 vue2.x ，思路如下。

• 本地上传视频
• 播放视频
• 视频截图
• 截图下载

使用到的第三方库：👉👉 ffmpeg.wasm

npm 上包名叫这个 👉👉 @ffmpeg/ffmpeg

ffmpeg.wasm

先来学习一下这个库的基本用法，全部的 API 都在下面了。

• createFFmpeg()
  • ffmpeg.load()
  • ffmpeg.run()