vue 3 中用 watch 监听音视频进度需分离驱动源与响应目标：以 video.currenttime 为唯一可信源，进度条只读不写；拖拽时暂停监听，seeked 后恢复；结合 duration 计算百分比并防 nan；失焦或暂停时抑制更新。
用 Vue 3 的 watch 监听音视频播放进度并同步进度条，关键在于**分离“驱动源”和“响应目标”**：播放器 DOM 的 currentTime 是唯一可信源，进度条只读取、不反向控制；同时要规避拖拽与自动播放之间的数据冲突。
监听 video.currentTime 变化并更新进度条值
进度条（如 <input type="range">）应绑定一个响应式变量（如 progressValue），但这个变量不能靠双向绑定（v-model）直接连 video.currentTime，否则会形成干扰闭环。
- 在
onMounted后获取videoRef，确保 DOM 已挂载 - 使用
watch监听videoRef.value?.currentTime，需加空值检查和防 NaN 处理 - 回调中更新
progressValue.value = Math.round(videoRef.value?.currentTime || 0)，避免小数抖动 - 添加
flush: 'post'选项，确保 DOM 更新后才触发，便于后续尺寸/样式处理
进度条拖动时暂停自动同步，手动跳转后恢复
用户拖动进度条属于“主动控制”，此时应临时停掉对 currentTime 的监听，防止播放器自动推进覆盖用户选择。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章