vue 获取video视频第一帧做为封面图

你可以通过以下代码获取video视频第一帧作为封面图：

<template>
  <div>
    <video ref="video" @loadedmetadata="onLoadedMetadata">
      <source :src="videoSrc" type="video/mp4">
    </video>
    <img :src="coverSrc" alt="video cover">
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'your video source',
      coverSrc: ''
    }
  },
  methods: {
    onLoadedMetadata() {
      const video = this.$refs.video
      const canvas = document.createElement('canvas')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
      this.coverSrc = canvas.toDataURL()
    }
  }
}
</script>

在这个代码中，我们首先引入了一个video标签和一个img标签。video标签用于展示视频，img标签用于展示封面图。当video标签的loadedmetadata事件触发时，我们创建了一个canvas标签，然后将video标签的第一帧画到canvas上。最后，我们将canvas转换为DataURL，并将其设置为img标签的src属性，从而展示第一帧作为封面图。