video 视频加载 自动获取封面的完整代码 js实现

以下是通过 JavaScript 实现自动获取视频封面的完整代码：

// 创建一个 Video 元素
var video = document.createElement('video');

// 设置视频源
video.src = 'video.mp4';

// 监听视频加载完成事件
video.addEventListener('loadeddata', function() {
  // 创建一个 Canvas 元素
  var canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // 在 Canvas 上绘制视频帧
  var ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 获取 Canvas 的 base64 编码
  var base64 = canvas.toDataURL('image/jpeg');

  // 创建一个 Image 元素，用于显示封面
  var img = document.createElement('img');
  img.src = base64;

  // 将封面添加到页面中
  document.body.appendChild(img);
});

// 将视频添加到页面中
document.body.appendChild(video);

请将 video.mp4 替换为你需要获取封面的视频的路径。这段代码会在页面中自动创建一个 Video 元素，并将视频加载到其中。当视频加载完成后，会创建一个 Canvas 元素，并在 Canvas 上绘制视频帧。然后将 Canvas 的内容转换为 base64 编码，并创建一个 Image 元素用于显示封面。最后，将封面添加到页面中。

注意：由于涉及跨域问题，如果视频源和页面不在同一个域下，则需要进行跨域设置才能成功获取封面