在nave中<video>标签上传视频，怎么获取上传的视频的第一帧作为视频的封面

在浏览器中使用`<input type="file">`标签上传视频文件后，可以通过`URL.createObjectURL()`方法将文件转换成URL，然后将该URL赋值给`<video>`标签的`src`属性。然后在`loadedmetadata`事件中获取视频的宽高和时长等信息，并在`loadeddata`事件中绘制视频的第一帧画面。最后将canvas元素转换成图片，作为视频的封面。

示例代码如下：

<input type="file" id="fileInput">

<video id="video" controls></video>
<canvas id="canvas"></canvas>

const fileInput = document.getElementById('fileInput');
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 监听input的change事件
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const url = URL.createObjectURL(file);

  // 将上传的视频文件赋值给video的src属性
  video.src = url;
});

// 监听视频加载完元数据事件
video.addEventListener('loadedmetadata', function() {
  // 获取视频的宽高和时长
  const width = video.videoWidth;
  const height = video.videoHeight;
  const duration = video.duration;

  // 设置canvas的宽高为视频的宽高
  canvas.width = width;
  canvas.height = height;

  // 在canvas上绘制视频的第一帧画面
  video.currentTime = 0; // 将视频播放时间调整到0
  video.pause(); // 暂停视频播放
  video.addEventListener('loadeddata', function() {
    ctx.drawImage(video, 0, 0, width, height);

    // 将canvas转换成图片，作为视频的封面
    const cover = canvas.toDataURL();

    console.log('视频宽度:', width);
    console.log('视频高度:', height);
    console.log('视频时长:', duration);
    console.log('视频封面:', cover);
  });
});

注意，`<input type="file">`标签上传的视频文件是异步加载的，因此需要在`change`事件中获取文件对象，并将其转换成URL。在`loadedmetadata`事件中获取视频的宽高和时长等信息，并在`loadeddata`事件中绘制视频的第一帧画面。此外，为了获取视频的第一帧画面，需要将视频播放时间调整到0，并暂停视频播放。