[TOC] ### 方法一：使用 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 } } ```