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

文章目录

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

废话不多说,直接上代码:

js 复制代码
<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>

核心代码

js 复制代码
  // 解决封面黑屏问题
  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 })
  })
相关推荐
趣浪吧8 天前
【JSON-to-Video】设置背景视频片断
json·aigc·音视频·视频
Bald Baby20 天前
uniapp实现H5、APP、微信小程序播放.m3u8监控视频
微信小程序·小程序·uni-app·音视频·视频
能来帮帮蒟蒻吗1 个月前
Python -将MP4文件转为GIF图片
开发语言·python·学习·视频
新知图书1 个月前
使用OpenCV的VideoCapture播放视频文件示例
opencv·视频
xuebodx09231 个月前
使用HunyuanVideo搭建文本生视频大模型
人工智能·pytorch·python·计算机视觉·chatgpt·音视频·视频
伊织code2 个月前
SAM 2 (Segment Anything ):图像与视频通用分割模型
sam·图像·视频·模型·segment·anything·分隔
大数据AI人工智能培训专家培训讲师叶梓2 个月前
FramePack:让视频生成更高效、更实用
人工智能·ai·大模型·音视频·视频·视频生成·长视频
^_^ 纵歌2 个月前
用python比较两个mp4是否实质相同
开发语言·python·音频·视频
QuZhengRong2 个月前
【AI】免费GPU算力平台部署wan2.1
人工智能·腾讯云·视频