主要思路

1.    播放視頻：html的video標簽

2.    使用html的canvas標簽來實現(xiàn)圖片的繪制

3.    將圖片轉(zhuǎn)成base64，然后使用html的a標簽實現(xiàn)保存下載

代碼是vue框架里面直接剪切過來的

screenshot() {
      const canvas = document.createElement("canvas"); //  創(chuàng)建canvas 用來截圖

      // const video = document.getElementById("video"); //  創(chuàng)建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實現(xiàn)視頻截圖,視頻批量截圖,canvas實現(xiàn) - 走看看