当前位置：首页 > news >正文

【Vue】vue3 video 保存视频进度，每次进入加载上次的视频进度

news 2025/7/6 2:30:00

使用 localStorage 存储每个视频的播放进度
在组件加载时恢复上次的播放进度
在视频播放过程中实时保存进度
在组件卸载前保存最终进度
使用 timeupdate 事件来监听视频播放进度的变化

在模板中为视频元素添加事件监听：

<videoloopautoplaycontrols:id="`video_${index}`":src="getVideoSrc(video.src)"class="video"@loadedmetadata="loadVideoProgress"></video>

// ... 其他导入保持不变
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'// ... paramsList 和 params 保持不变// 添加视频进度保存的常量
const VIDEO_PROGRESS_KEY = 'VIDEO_PROGRESS'const videoList = ref([{title: '大范围流场图',src: 'dfwlct',isPlaying: true,progress: 0, // 添加进度属性},{title: '工程局部流场图',src: 'gcjblct',isPlaying: true,progress: 0, // 添加进度属性},
])// 加载保存的视频进度
const loadVideoProgress = () => {const savedProgress = localStorage.getItem(VIDEO_PROGRESS_KEY)if (savedProgress) {const progressData = JSON.parse(savedProgress)videoList.value.forEach((video, index) => {if (progressData[video.src]) {video.progress = progressData[video.src]const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {videoElement.currentTime = video.progress}}})}
}// 保存视频进度
const saveVideoProgress = () => {const progressData = {}videoList.value.forEach((video, index) => {const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {progressData[video.src] = videoElement.currentTime}})localStorage.setItem(VIDEO_PROGRESS_KEY, JSON.stringify(progressData))
}// 监听视频时间更新
const handleTimeUpdate = (index: number) => {const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElementif (videoElement) {videoList.value[index].progress = videoElement.currentTimesaveVideoProgress()}
}// 组件挂载时加载进度
onMounted(() => {loadVideoProgress()// 为每个视频添加时间更新事件监听videoList.value.forEach((_, index) => {const videoElement = document.getElementById(`video_${index}`)if (videoElement) {videoElement.addEventListener('timeupdate', () => handleTimeUpdate(index))}})
})// 组件卸载前移除事件监听
onBeforeUnmount(() => {videoList.value.forEach((_, index) => {const videoElement = document.getElementById(`video_${index}`)if (videoElement) {videoElement.removeEventListener('timeupdate', () => handleTimeUpdate(index))}})saveVideoProgress()
})// ... 其他代码保持不变