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

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

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

loop

autoplay

controls

:id="`video_${index}`"

:src="getVideoSrc(video.src)"

class="video"

@loadedmetadata="loadVideoProgress">

// ... 其他导入保持不变

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 HTMLVideoElement

if (videoElement) {

videoElement.currentTime = video.progress

}

}

})

}

}

// 保存视频进度

const saveVideoProgress = () => {

const progressData = {}

videoList.value.forEach((video, index) => {

const videoElement = document.getElementById(`video_${index}`) as HTMLVideoElement

if (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 HTMLVideoElement

if (videoElement) {

videoList.value[index].progress = videoElement.currentTime

saveVideoProgress()

}

}

// 组件挂载时加载进度

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

})

// ... 其他代码保持不变

这样，用户每次进入页面时都会自动加载上次观看的进度。进度信息会在以下情况下保存：

视频播放过程中用户暂停视频时用户离开页面时