解决获取视频第一帧黑屏问题

解决获取视频第一帧黑屏问题

废话不多说，直接上代码：

<script setup>
const status = ref('请点击“添加视频”按钮添加视频')
const videoElement = ref(document.createElement('video'))
const currentImageSource = ref(null)

async function getImageByVideo() {
 videoElement.value.src = 'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm'
  videoElement.value.crossOrigin = 'anonymous' // 处理跨域
  videoElement.value.preload = 'metadata'
  videoElement.value.muted = true
  videoElement.value.playsInline = true

  status.value = '视频加载中...'

  // 解决封面黑屏问题
  await new Promise((resolve) => {
    videoElement.value.addEventListener('loadeddata', resolve, { once: true })
  })

  // 设置当前时间确保获取有效帧
  videoElement.value.currentTime = 0.01

  // 等待视频跳转到指定时间
  await new Promise((resolve) => {
    videoElement.value.addEventListener('seeked', resolve, { once: true })
  })

  // 获取视频帧作为封面
  const canvas = document.createElement('canvas')
  canvas.width = videoElement.value.videoWidth
  canvas.height = videoElement.value.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height)

  // 创建封面图像
  const img = new Image()
  img.src = canvas.toDataURL('image/jpeg')
  img.onload = () => {
    currentImageSource.value = img
  }
}
</script>

核心代码

  // 解决封面黑屏问题
  await new Promise((resolve) => {
    videoElement.value.addEventListener('loadeddata', resolve, { once: true })
  })

  // 设置当前时间确保获取有效帧
  videoElement.value.currentTime = 0.01

  // 等待视频跳转到指定时间
  await new Promise((resolve) => {
    videoElement.value.addEventListener('seeked', resolve, { once: true })
  })