说明：项目中需要视频的封面图片，以下是如何截取视频第一帧作为封面，如需截取多个视频，按自己需要代入即可。

<template>
  <div class="about">
    <div v-if="videoUrl">
      <video
        :src="videoUrl"
        style="width:320px;height:200px;"
        controls="controls"
        id="upvideo"
      >您的浏览器不支持视频播放</video>
    </div>
    <canvas
      id="mycanvas"
      style="display: none"
    ></canvas>

    <img v-if="imgsrc" :src="imgsrc"  style="margin-top:50px;">
  </div>
</template>
<script>
export default {
  data() {
    return {
      videoUrl: "http://video.xbbzp.com/llSEAeCVtYceYvivaDJ6jz3287WX",
      imgsrc:''
    };
  },
  mounted () {
    this.findvideocover(this.videoUrl,{url:''})
  },
  methods: {
    //截取视频第一帧作为播放前默认图片
    findvideocover(url, file) {
      const video = document.getElementById("upvideo"); // 获取视频对象
      // const video = document.createElement("video") // 也可以自己创建video
      video.src = url; // url地址 url跟 视频流是一样的
      var canvas = document.getElementById("mycanvas"); // 获取 canvas 对象
      const ctx = canvas.getContext("2d"); // 绘制2d
      video.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
      video.currentTime = 1; // 第一帧
      video.oncanplay = () => {
        canvas.width = video.clientWidth; // 获取视频宽度
        canvas.height = video.clientHeight; //获取视频高度
        // 利用canvas对象方法绘图
        ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
        // 转换成base64形式
        this.imgsrc = canvas.toDataURL("image/png"); // 截取后的视频封面
        file.url = this.imgsrc;
      };
    },
  },
};
</script>