uniapp nvue video 视频封面展示视频第一帧

你可以在 `video` 标签中添加 `poster` 属性，来展示视频的封面图。例如：

<video src="your_video.mp4" poster="your_poster.jpg"></video>

其中 `your_video.mp4` 是你的视频文件，`your_poster.jpg` 是你的视频封面图文件。如果你想展示视频的第一帧作为封面图，你可以通过 JavaScript 来实现：

<template>
  <video ref="video" src="your_video.mp4"></video>
</template>

<script>
export default {
  mounted() {
    const video = this.$refs.video;
    video.addEventListener('loadedmetadata', () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      const posterUrl = canvas.toDataURL();
      video.setAttribute('poster', posterUrl);
    });
  },
};
</script>

这段代码会在 `mounted` 钩子中监听视频的 `loadedmetadata` 事件，当视频元数据加载完成后，会创建一个 `canvas` 元素，将视频的第一帧绘制到 `canvas` 上，然后将 `canvas` 转换成图片地址，最后将图片地址设置为视频的封面图。