js获取视频第一帧图片

在 JavaScript 中，可以使用 `HTMLMediaElement` 对象的 `currentTime` 属性和 `drawImage` 方法来获取视频的第一帧图片。具体步骤如下：

1. 创建一个 `video` 元素，并设置其 `src` 属性为视频的 URL：

let video = document.createElement('video');
video.src = 'path/to/video.mp4';

2. 监听 `loadedmetadata` 事件，确保视频已经加载了元数据信息：

video.addEventListener('loadedmetadata', function() {
  // 在这里获取第一帧图片
});

3. 创建一个 `canvas` 元素，设置其宽高为视频的宽高，并将视频的第一帧绘制到 `canvas` 中：

let canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

4. 将 `canvas` 转换为图片，可以使用 `toDataURL` 方法：

let img = new Image();
img.src = canvas.toDataURL();

完整的代码如下：

let video = document.createElement('video');
video.src = 'path/to/video.mp4';
video.addEventListener('loadedmetadata', function() {
  let canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  let img = new Image();
  img.src = canvas.toDataURL();
  document.body.appendChild(img);
});

这样，就可以将视频的第一帧图片显示在页面上了。注意，如果视频较大，可能需要等待一段时间才能获取到第一帧图片。