js video自动获取封面

要自动获取JavaScript视频的封面，可以使用HTML5的video元素的poster属性来指定视频的封面。poster属性接受一个图片的URL作为值，并在视频加载之前显示该图片。

以下是一个示例代码：

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

<script>
  // 获取video元素
  var video = document.getElementById('myVideo');
  
  // 当视频加载完成后，获取第一帧作为封面
  video.addEventListener('loadeddata', function() {
    // 创建一个canvas元素
    var canvas = document.createElement('canvas');
    // 设置canvas的宽高与视频相同
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    // 将视频的当前帧绘制到canvas上
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    // 将canvas转换为图片URL并设置为video元素的封面
    video.poster = canvas.toDataURL();
  });
</script>

在上面的示例中，首先创建一个video元素，并指定默认的封面图片。然后使用JavaScript获取video元素，并监听其loadeddata事件。当视频加载完成后，创建一个canvas元素，并将视频的当前帧绘制到canvas上。最后，将canvas转换为图片URL，并将其设置为video元素的封面。

请注意，由于涉及到跨域资源的访问，上述代码在本地运行可能会遇到安全限制。在实际项目中，可以将视频和封面图片放在同一个域下，以确保代码能够正常运行