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

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

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

html 复制代码
<video
  loop
  autoplay
  controls
  :id="`video_${index}`"
  :src="getVideoSrc(video.src)"
  class="video"
  @loadedmetadata="loadVideoProgress"></video>
ts 复制代码
// ... 其他导入保持不变
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()
})

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

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

  • 视频播放过程中
  • 用户暂停视频时
  • 用户离开页面时
相关推荐
喝拿铁写前端32 分钟前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping36 分钟前
浏览器的缓存机制
前端·后端
-代号95271 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea2 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠2 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷2 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo2 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪2 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏3 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
计算机毕设定制辅导-无忧学长3 小时前
HTML 与 JavaScript 交互:学习进程中的新跨越(一)
javascript·html·交互