上传视频 获取视频第一帧 做为封面 前端js

上传视频 获取视频第一帧 做为封面 前端js

重点1：URL.createObjectURL(file|blob)
URL.createObjectURL(file|blob)：返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
重点2：canvas

getVideoCover(file){
    
    
      const url = URL.createObjectURL(file)
      let dataURL = ''
      const video = document.createElement("video")
      video.setAttribute('crossOrigin', 'anonymous')
      video.setAttribute('src', url)
      video.setAttribute('width', 400)
      video.setAttribute('height', 'auto')
      video.setAttribute('preload', 'auto')
      video.addEventListener('loadeddata', ()=> {
    
    
        const canvas = document.createElement("canvas")
        const width = video.videoWidth 
        const height = video.videoHeight
        canvas.width = width
        canvas.height = height
        canvas.getContext("2d").drawImage(video, 0, 0, width, height) 
        dataURL = canvas.toDataURL('image/jpeg')
        const blob = that.base64ToBlob(dataURL)
        const coverUrl = blob ? URL.createObjectURL(blob) : ''
        console.log("coverUrl",coverUrl )
        })
  }