前端取视频文件的第一帧图片

通过el-upload组件上传视频文件后，取视频文件第一帧当作封面，获取视频文件的宽、高、大小、帧率、时长

const getVideoDetailInfo = (file)=> {
    const size = file.size
    return new Promise((resolve) => {
      const videoElement = document.createElement("video");
      videoElement.src = URL.createObjectURL(file.raw);
      videoElement.crossOrigin = 'anonymous'
      videoElement.currentTime = 1 //第一帧
      videoElement.addEventListener("loadedmetadata", function () {
        let width = videoElement.videoWidth
        let height = videoElement.videoHeight
        let canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d');
        videoElement.oncanplay = () => {
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(videoElement, 0, 0, canvas.width,canvas.height)
          const coverUrl = canvas.toDataURL("image/png");//base64格式
          videoElement.remove();
          canvas.remove();
          const frameRate = videoElement.captureStream().getVideoTracks()[0].getSettings().frameRate; //帧率
          resolve({
            duration: videoElement.duration, //时长
            size, //大小
            width, //宽
            height, //高
            coverUrl,//封面图片
            frameRate,//帧率
            screen: width >= height ? 0 : 1
          });
        }
      });
    });
  }