主要思路

1.    播放视频：html的video标签

2.    使用html的canvas标签来实现图片的绘制

3.    将图片转成base64，然后使用html的a标签实现保存下载

代码是vue框架里面直接剪切过来的

screenshot() {
      const canvas = document.createElement("canvas"); //  创建canvas 用来截图

      // const video = document.getElementById("video"); //  创建video 用来存放被截图的视频
      const video = this.$refs.video;
      const a = document.createElement("a");
      // const a = document.getElementById("a"); //  用来自动下载图片保存到本地
      // video.setAttribute("crossOrigin", "anonymous"); //  支持跨域

      canvas.width = video.clientWidth;
      canvas.height = video.clientHeight;
      var ctx = canvas.getContext("2d");

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      const filename = "file_" + new Date().getTime() + ".png";
      a.setAttribute("download", filename);

      a.href = canvas.toDataURL("image/png");
      a.click();
    },

<video
      ref="video"
      id="video"
      :autoplay="autoplay"
      x5-playsinline
      playsinline
      webkit-playsinline
      muted
    >
      您的浏览器不支持 video 标签。
</video>
<div class="controls" @click.stop>
      <svg-icon class="jietu" icon-class="jietu" @click="screenshot" />
</div>

参考：js实现视频截图,视频批量截图,canvas实现 - 走看看