用 watchEffect 实现音视频播放自动进度同步，核心是统一维护 ref(videoTime) 作为唯一时间源，播放器组件读写+防抖+校验，其他组件只读响应；通过 provide/inject 或 Pinia 共享，配合 visibilitychange、seeked、readyState 等兜底处理干扰。
用 watchEffect 实现音视频播放的自动进度同步，核心是让多个组件“读同一份时间”，但只由播放器组件负责“写”这份时间，其他组件纯响应、不干预。它不依赖轮询或手动事件监听，而是靠 Vue 响应式系统自动触发更新，关键在于统一数据源、防抖控制、状态隔离和干扰兜底。
统一维护一个响应式播放时间
在状态管理层（如 Pinia store 或父组件）中定义一个共享的 ref：
- 推荐写法：
const videoTime = ref(0)，避免用普通数字或包裹整个video对象 - 所有组件（进度条、字幕、章节列表等）都从这个
videoTime读值，而不是各自访问video.currentTime - 可通过
provide/inject或 store 暴露给子组件，确保数据来源唯一
播放器组件：读写+防抖+校验
播放器组件是唯一有权修改 videoTime 的角色，同时要响应外部变更：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 监听原生
timeupdate事件，用节流（如 30–50ms）更新videoTime.value = video.currentTime - 用
watchEffect监听videoTime变化，主动设置video.currentTime；跳转后等待seeked事件再恢复播放，避免竞态 - 加载完成前（
loadedmetadata触发前）不启用同步，防止NaN导致异常 - 拖拽结束（
seeked）后强制同步一次，比仅依赖timeupdate更可靠
非控制类组件：只读不写，响应驱动
进度条、字幕、时间轴等组件不操作 DOM，也不直接赋值 currentTime：
- 进度条显示绑定
:value="videoTime"；拖动时只emit('seek', newTime)，交由播放器统一处理 - 字幕高亮用
computed查找当前videoTime所在段落，避免每次渲染遍历数组 - 章节跳转点击后也只发事件，不自行调用
video.currentTime = x
应对真实场景干扰
暂停、切后台、多设备进入等都会影响同步准确性，需针对性处理：
- 页面不可见（
document.hidden === true）时暂停watchEffect副作用，恢复可见后再补同步一次 - 监听
pause和playing事件：暂停时不主动上报；恢复播放时对比服务端或主控端最新值做一次校准 - 跨端同步时，以服务端为唯一可信源（SSOT），本地变更后上报
{ roomId, userId, currentTime, timestamp }，其他端通过 WebSocket 接收并跳转 - 跳转前检查
video.readyState >= 1，否则缓存进度，等待canplay后再执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
