js截取video视频某一帧做封面的简单案例(附完整代码)

<video src="video.mp4" autoplay></video>

<canvas width="640" height="360" style="display:none;"></canvas>

<script>
  const video = document.querySelector('video');
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');
</script>

<script>
  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  }
</script>

<button onclick="captureFrame()">生成封面</button>

<script>
  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL();
    const img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
  }
</script>

<video src="video.mp4" autoplay></video>
<canvas width="640" height="360" style="display:none;"></canvas>

<button onclick="captureFrame()">生成封面</button>

<script>
  const video = document.querySelector('video');
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  function captureFrame() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL();
    const img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
  }
</script>

//取视频的第一帧作为封面
function cutPicture(item) {   //这里的item是列表的每一项
  let video = document.createElement("video");
  video.style = "position:fixed; top: 9999px;left:9999px;z-index:-9999";
  video.preload = "metadata";
  video.currentTime = 1; //截取的视频第一秒作为图片
  video.src = item.videoUrl;
  video.setAttribute("crossOrigin", "anonymous");
  video.width = 113;
  video.height = 75;
  document.body.appendChild(video);
  video.onloadeddata = function () {
    let canvas = document.createElement("canvas");
    canvas.width = 113;
    canvas.height = 75;
    canvas.getContext("2d").drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
    var oGrayImg = canvas.toDataURL("image/jpeg");
    item.imgUrl = oGrayImg; //这里输出的imgUrl就是视频的封面图
    this.remove();
  };
  return item;
}