js video自动获取视频封面图片

要自动获取视频封面图片，你可以使用HTML5的<video>元素和JavaScript来实现。以下是一个简单的示例：

HTML:

<video id="myVideo" width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

JavaScript:

var video = document.getElementById('myVideo');

video.addEventListener('loadedmetadata', function() {
  var canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  
  var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  var image = new Image();
  image.src = canvas.toDataURL();
  
  // 在这里可以使用image对象，比如将其添加到页面上显示
  document.body.appendChild(image);
});

在这个示例中，我们首先获取了<video>元素，并添加了一个loadedmetadata事件监听器。当视频元数据加载完成后，事件监听器会执行，然后我们创建一个<canvas>元素，设置其大小和视频大小一致。接着，我们将视频的帧绘制到<canvas>上下文中，并使用toDataURL()方法将<canvas>内容转换为Base64编码的图像数据。最后，我们创建一个新的<img>元素，并将其src属性设置为图像数据，然后将其添加到页面上显示。

这样就可以实现自动获取视频封面图片的功能了