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

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

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

<video
  loop
  autoplay
  controls
  :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: '工程局部流场图'