解決獲取視頻第一幀黑屏問題

廢話不多說，直接上代碼：

<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 })})