js截取video视频某一帧做封面的简单案例

可以使用 canvas元素来截取视频某一帧并生成封面。

首先，在 video 标签上设置视频源地址和自动播放属性：

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

然后，在 canvas 标签上定义宽高和样式，并通过 JavaScript 获取视频元素和 canvas 元素：

<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>

接着，定义一个函数来截取视频某一帧，并将其渲染到 canvas 上：

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

在需要生成封面的地方调用该函数即可：