video标签获取视频第一帧

// 获取视屏第一帧
    getFirstImg() {
      const homeVideo = document.getElementById('upload_video')
      const canvas = document.createElement('canvas')
      canvas.width = homeVideo.videoWidth
      canvas.height = homeVideo.videoHeight
      canvas.getContext('2d').drawImage(homeVideo, 0, 0, canvas.width, canvas.height)
      const firstFrame = canvas.toDataURL('image/png', 1) // 第一帧图片url
      return this.dataURLtoFile(firstFrame, '第一帧')
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },

注意: 视频未加载完全获取第一帧会获取到黑色图片!!

解决方法: 调整代码顺序或者延时器!!

video标签无法解析后端返回不带后缀的url(Android和iOS是否都存在暂未确定)