Question

基本原理就是把视频画到 Canvas 里面，然后调用 toDataURL 或者 toBlob ，再利用 a 标签模拟点击，download 属性指定名字。

看一下效果：

   function captureVideo(videoEl) {
      let canvasEl;
      let dataUrl;
      try {
        const cps = window.getComputedStyle(videoEl);
        const width = +cps.getPropertyValue("width").replace("px", "");
        const height = +cps.getPropertyValue("height").replace("px", "");

        canvasEl = document.createElement("canvas");
        canvasEl.style.cssText = `position:fixed;left:-9999px`;
        canvasEl.height = height;
        canvasEl.width = width;

        document.body.appendChild(canvasEl);

        const ctx = canvasEl.getContext("2d");
        ctx.drawImage(videoEl, 0, 0, width, height);
        // const image = canvas.toDataURL("image/png");
        dataUrl = canvasEl.toDataURL();

        document.body.removeChild(canvasEl);
        canvasEl = null;
        return dataUrl;
      } finally {
        if (canvasEl) {
          document.body.removeChild(canvasEl);
        }
        if (dataUrl) {
          return dataUrl;
        }
      }
    }

示例 注意添加 crossorigin="anonymous" ，不然转为图片会失败。

  <video id="videoEL" controls autoplay crossorigin="anonymous"
    src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" width="500"></video>

function download(url) {
  const aEl = document.createElement("a");
  aEl.href = url;
  aEl.download = "视频.png";
  aEl.click();
}


function doCaptureVideo() {
  const url = captureVideo(videoEL);
  download(url);
}

doCaptureVideo()