获取视频的第一帧作为封面图

很多时候播放视频时会需要展示封面图，但是不可能每次都上传封面图。虽然pc大多数都可以自动使用第一帧为封面图，但部分机型还是不支持，因此需要自己手动去绘画一张

    getVideoFirstFrame(videoUrl) {
      // debugger
      // 创建video元素
      const video = document.createElement('video')
      video.src = videoUrl
      video.setAttribute('crossOrigin', 'Anonymous') // 处理跨域
      video.setAttribute('preload', 'auto') // auto|metadata|none
      // 等待视频加载完成
      return new Promise((resolve, reject) => {
        video.addEventListener('loadedmetadata', () => {
          // 创建canvas元素
          const canvas = document.createElement('canvas')
          canvas.width = video.videoWidth
          canvas.height = video.videoHeight

          // 将视频第一帧绘制到canvas上
          const ctx = canvas.getContext('2d')

          ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

          // 将canvas图像转换为base64格式的数据URI
          const dataUrl = canvas.toDataURL()

          // 返回base64格式的数据URI
          resolve(dataUrl)
        })

        // 如果视频加载出错，则返回错误信息
        video.addEventListener('error', () => {
          reject(`Failed to load video: ${videoUrl}`)
        })
      })
    },

使用：

    this.getVideoFirstFrame('https://xxx.mp4')
      .then((dataUrl) => {
        console.log(dataUrl) // 打印获取到的base64格式的数据URI
      })
      .catch((error) => {
        console.error(error) // 打印错误信息
      })