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

原创

于 2023-09-26 15:30:07 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍如何利用JavaScript从视频中截取一帧作为封面。通过HTML的video和canvas元素，结合JavaScript获取视频帧，将其渲染到canvas上，然后转换成图片插入到页面中。

可以使用 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>

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

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

最后，将 canvas 元素转换为图片元素并插入到页面

最低0.47元/天解锁文章

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

1 条评论