vue3 视频默认显示第一帧，解决视频加载的时候是黑色的问题

方法一：使用 JavaScript 的 Canvas API 来截取视频的第一帧

<template>
  <div class="video-container">
    <video
      ref="videoRef"
      @loadeddata="captureFirstFrame"
      controls
    ></video>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const videoRef = ref<HTMLVideoElement | null>(null);
let posterImageSrc: string | null = null;
onMounted(() => {
  // 如果视频在mounted时还没有触发loadeddata，你可能需要额外的逻辑来处理这种情况
  // 例如，设置一个超时或监听更多的视频事件
});
const captureFirstFrame = () => {
  if (videoRef.value) {
    const canvas = document.createElement('canvas');
    canvas.width = videoRef.value.videoWidth;
    canvas.height = videoRef.value.videoHeight;
    const context = canvas.getContext('2d');
    if (context) {
      // 绘制视频的第一帧到canvas上
      context.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height);
      // 将canvas转换为图片URL并设置为海报图
      posterImageSrc = canvas.toDataURL('image/jpeg');
      videoRef.value.setAttribute('poster', posterImageSrc);
      // 注意：这里设置poster属性后，如果视频开始播放，海报图会被视频内容替换。
      // 如果你希望在视频播放后仍然显示海报图（例如，在暂停时），你需要额外的逻辑来处理。
    }
  }
};
</script>
<style scoped>
.video-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
</style>

方法二：方法1不行的情况下直接使用currentTime来设置一点视频进度

方法1不行的情况下可以考虑直接使用currentTime来设置一点视频进度。这样就可以简单的实现展示视频内容了

    const captureFirstFrame = () => {
        if (videoRef.value) {
            const canvas = document.createElement('canvas')
            canvas.width = videoRef.value.videoWidth
            canvas.height = videoRef.value.videoHeight
            const context = canvas.getContext('2d')
            if (context) {
                let video = videoRef.value
                video.crossOrigin = 'Anonymous'
                // 设置播放进度
                video.currentTime = 0.5
            }
        }
    }

如何觉得预先设置一点进度不太好，可以在首次点击播放的时候从头开始播放

页面上绑定一个play事件

<video ref="videoRef" @play="onPlay" @loadeddata="captureFirstFrame" controls width="100%" height="100%">
    <source :src="state.vedioUrl" type="video/mp4" />
    Your browser does not support the video tag.
</video>

然后在play事件中去处理如果是第一次点击就头开始播放即可

const state = reactive({
    isFirstPlay:true,
})
const videoRef = ref<HTMLVideoElement | null>(null)
const onPlay = () => {
    // 如果是第一次进行视频播放就从0开始
    if(state.isFirstPlay){
        let video = videoRef.value
        video.currentTime = 0
        state.isFirstPlay=false
    }    
}