js截取视频第一帧

1,465 阅读1分钟

上传视频时,手动截取视频第一帧,用于封面展示

const videoImg = await this.getVideoBase64(url) // video的url
getVideoBase64 (url) {
  return new Promise(function (resolve, reject) {
    let dataURL = ''
    const video = document.createElement('video')
    video.setAttribute('crossOrigin', 'Anonymous') // 处理跨域
    video.setAttribute('src', url)
    // 可以设置创建视频有固定的宽高
    // video.setAttribute('width', 400)
    // video.setAttribute('height', 240)
    video.setAttribute('preload', 'auto') // auto|metadata|none
    video.addEventListener('loadeddata', function () {
      const canvas = document.createElement('canvas')
      // canvas的尺寸和设置的视频宽高一样
      // const width = video.width
      // const height = video.height
      // 如果未设置创建时视频的宽高,则使用默认视频的宽高
      const width = video.videoWidth
      const height = video.videoHeight
      canvas.width = width
      canvas.height = height
      canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
      dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
      console.log('dataURL:', dataURL) // base64格式的地址
      resolve(dataURL)
    })
  })
}