前端截取视频第一帧图 vue2+elementui

截取方法

 extractVideoFrame(video){
      // 创建视频元素
      const videoElement = document.createElement('video');
      videoElement.preload = 'metadata';
      videoElement.src = URL.createObjectURL(video);

      // 等待视频元素加载完成
      return new Promise((resolve, reject) => {
        videoElement.onloadedmetadata = () => {
 // 设置视频时间为第一秒
          videoElement.currentTime = 1;
          // 捕获当前帧为图片
          videoElement.addEventListener('seeked', () => {
            const canvas = document.createElement('canvas');
 canvas.width = videoElement.videoWidth;
            canvas.height = videoElement.videoHeight;
            canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
const imageUrl = canvas.toDataURL('image/png');
            resolve(imageUrl);
            URL.revokeObjectURL(videoElement.src); // 释放URL对象
 });
        };
        videoElement.onerror = reject;
      });
    },

调用在
 handleUploadSuccess(response, file, fileList){
      // 取视频第一帧作为预览
      this.extractVideoFrame(file.raw).then(previewUrl => {
        //previewUrl为视频第一帧图片
      });
    },