JS 怎么获取视频第一帧作为封面图？

原创

沧州虎王科技 2023-11-06 19:30:17 ©著作权

©著作权归作者所有：来自51CTO博客作者沧州虎王科技的原创作品，请联系作者获取转载授权，否则将追究法律责任

要获取视频的第一帧作为封面图，你可以使用HTML5的 <video> 元素和 JavaScript 来实现。下面是一个简单的步骤：

在HTML中，创建一个 <video> 元素，并设置视频的路径或URL：

<video id="myVideo" src="path/to/video.mp4" width="320" height="240"></video>

在JavaScript中，获取 <video> 元素的引用，并监听它的 loadedmetadata 事件（视频元数据加载完成时触发）：

const video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", function() {
  // 在元数据加载完成后执行以下代码
  // 获取视频第一帧的时间点
  const firstFrameTime = 0; // 这里我们获取第一帧，所以时间点设置为0
  
  // 设置视频当前时间为第一帧的时间点
  video.currentTime = firstFrameTime;
});

继续在JavaScript中，监听 <video> 元素的 loadeddata 事件（第一帧加载完成时触发），并使用 <canvas> 元素来绘制第一帧：

video.addEventListener("loadeddata", function() {
  // 在第一帧加载完成后执行以下代码
  // 创建一个 canvas 元素
  const canvas = document.createElement("canvas");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  
  // 在 canvas 上绘制视频的第一帧
  const context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 获取绘制的第一帧作为封面图的 base64 编码
  const coverImage = canvas.toDataURL("image/png");
  
  // 将封面图显示在页面上，你可以使用这个 base64 编码来设置图片的 src 属性
  // 例如：document.getElementById("coverImage").src = coverImage;
});

这样，你就可以通过使用 <video> 元素和 JavaScript 来获取视频的第一帧作为封面图了。注意，上述代码只是一个基本示例，你可以根据自己的需求进行更多的定制和优化。