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

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

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

<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 = truevideoElement.value.playsInline = truestatus.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.videoWidthcanvas.height = videoElement.value.videoHeightconst 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 })})