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

文章目录

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

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

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 })
  })
相关推荐
Js_cold3 天前
8K4K图像评估平台
图像处理·fpga开发·视频
Font Tian3 天前
FFmpeg 不同编码的压缩命令详解
ffmpeg·音视频·视频编解码·视频·视频压缩
Js_cold6 天前
FPGA DDR 地址映射-黄金法则
图像处理·fpga开发·音视频·视频
青柠剪吧9 天前
视频合成素材视频-多合一功能-青柠剪吧
视频·剪辑
青柠剪吧14 天前
批量剪映剪辑-批量视频混剪全能工具-青柠剪吧
视频·软件需求·剪映·剪映助手
范男15 天前
基于Pytochvideo训练自己的的视频分类模型
人工智能·pytorch·python·深度学习·计算机视觉·3d·视频
不大姐姐AI智能体23 天前
最新Coze(扣子)智能体工作流:用Coze实现「图片生成-视频制作」全自动化,3分钟批量产出爆款内容
运维·人工智能·经验分享·自动化·aigc·视频
软件测试-阿涛1 个月前
2025年大语言模型与多模态生成工具全景指南(V2.0)
大数据·图像处理·人工智能·语言模型·视频
Casia_Dominic1 个月前
【nerf处理视频数据】Instant-NGP项目NeRF模型训练数据集准备指南
linux·人工智能·ubuntu·视频·nerf
lm down1 个月前
ComfyUI中运行Wan 2.1工作流,电影级视频,兼容Mac, Windows
人工智能·macos·ai作画·视频