js截取video视频某一帧做封面的简单案例-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

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

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

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

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

完整代码如下：文章来源地址https://www.toymoban.com/news/detail-766048.html

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

到了这里，关于js截取video视频某一帧做封面的简单案例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！