Vue.js中监听视频进度需用timeupdate事件更新响应式变量再watch，配合防抖（拖动后3秒）与节流（每15秒）上传，辅以localStorage缓存、失败重试、幂等设计及seeked/ended/visibilitychange等状态一致性处理。
Vue.js 中用 watch 监听视频播放进度并同步到云端，核心在于：**精准捕获 currentTime 变化、防抖存档、失败重试、状态一致性保障**。直接监听 video.currentTime 不可靠，应结合 timeupdate 事件 + 响应式数据桥接。
用 ref 桥接 video 元素并绑定 timeupdate 事件
不要依赖 watch(videoRef.value?.currentTime) —— DOM 属性无法被 Vue 响应式系统追踪。正确做法是：
- 在
<video ref="videoRef"></video>上监听原生timeupdate事件 - 在事件回调中更新一个响应式变量（如
currentProgress） - 再对这个变量使用
watch，确保变化可追踪、可调试
示例代码片段：
setup() {
const videoRef = ref(null)
const currentProgress = ref(0)
const onTimeUpdate = () => {
if (videoRef.value) {
currentProgress.value = Math.floor(videoRef.value.currentTime)
}
}
onMounted(() => {
videoRef.value?.addEventListener('timeupdate', onTimeUpdate)
})
onBeforeUnmount(() => {
videoRef.value?.removeEventListener('timeupdate', onTimeUpdate)
})
// 后续 watch currentProgress.value
}
带防抖和节流的 watch 策略
视频每秒触发多次 timeupdate（通常 4–60 次），直接每次变更都请求云端会浪费资源、触发频控。推荐组合策略：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 防抖存档：用户停止拖动/播放后 3 秒再上传，适合“观看完成”或“关键节点”场景
- 节流存档：每 15 秒强制同步一次，保证断网恢复后进度不丢失过多
- 两者结合：拖动时走防抖，正常播放走节流
可借助 lodash.throttle 或手写简易节流函数，watch 回调中根据 videoRef.value?.paused 判断当前状态再决定触发逻辑。
云端同步与异常处理
上传进度不是“发个请求就完事”，需考虑：
-
本地缓存兜底：每次更新先存入
localStorage（如progress:videoId），页面刷新后优先读取 - 失败自动重试：网络错误或 5xx 响应时，将待同步项加入队列，定时轮询重发（最多 3 次）
-
幂等设计：后端接口接收
videoId + timestamp + clientId，避免重复提交覆盖更晚进度 - 离线标记：上传成功前 UI 显示「同步中…」，失败后显示「未同步」小图标，提升用户感知
暂停/跳转/重新加载时的状态一致性
用户行为可能破坏进度连续性，需主动干预：
- 监听
seeking和seeked事件，区分“正在拖动”和“已定位完成”，只在seeked后更新currentProgress - 页面隐藏（
visibilitychange）或组件卸载前，立即触发一次强制同步，防止用户切走后关闭浏览器丢进度 - 视频
ended事件触发时，将进度设为duration并立即存档，标记“已看完” - 从云端拉取初始进度时，用
videoRef.value.currentTime = savedTime并调用videoRef.value.play().catch(...)避免自动播放拦截
