Vue 3 中音视频进度同步逻辑复用的核心是：封装组合式函数统一管理播放状态与时间控制，通过 Pinia 实现跨组件进度共享，用自定义指令处理拖拽交互，并借助 provide/inject 与 Teleport 支持嵌套场景下的状态透传。
Vue 3 中实现音视频进度同步的逻辑复用，核心是把“播放状态监听、时间更新、拖拽控制、跨实例同步”这些共性能力抽离成可组合、可共享的逻辑单元，而不是在每个组件里重复写 timeupdate、seeking、watch 等逻辑。
用组合式函数封装通用进度控制逻辑
将音频/视频元素的引用、当前时间、总时长、播放状态、拖拽开关等统一管理，对外暴露标准化接口：
- 接收
ref<htmlaudioelement htmlvideoelement></htmlaudioelement>作为输入源 - 内部自动监听
timeupdate、durationchange、loadedmetadata等事件 - 提供
setCurrentTime()、play()、pause()等方法 - 返回响应式状态如
currentTime、duration、isPlaying
这样，多个播放器组件（比如列表中的多个音频项）都能调用同一份逻辑，避免重复绑定事件或手动同步。
用 Pinia 或全局 store 实现跨组件进度共享
当需要多个播放器保持进度一致（如主视图与弹窗、PC 与移动端），应把进度状态提升到全局 store：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 定义一个
usePlaybackStore()，包含currentProgress: ref(0)、playing: ref(false)、activeId: ref(string) - 各播放器组件通过
watchEffect监听 store 的currentProgress，并在非拖拽状态下主动同步自身currentTime - 拖拽开始时暂停 watch，拖拽结束时触发
store.setCurrentProgress(value)并广播更新
这种模式天然支持多端协同——比如手机端拖动进度，PC 端播放器实时跳转，无需轮询或 WebSocket。
用自定义指令统一处理拖拽交互
进度条的点击跳转、鼠标/触摸拖拽行为高度相似，适合封装为指令：
- 定义
v-progress-drag，接收参数如onDrag(value: number)、onEnd(value: number) - 指令内部统一处理
mousedown/touchstart → mousemove/touchmove → mouseup/touchend流程 - 计算容器宽度、鼠标偏移、映射为 0–1 范围值，再交由组合函数执行
setCurrentTime
这样所有进度条 DOM 元素只需加一行指令，就能获得一致的拖拽体验，样式和逻辑完全解耦。
用 Teleport + provide/inject 支持嵌套场景下的状态透传
在复杂 UI（如弹窗内嵌播放器、侧边栏控制栏）中，父子组件层级深，props 层层透传易出错。可用：
- 父级组件
provide('playbackContext', playbackApi)，其中playbackApi来自上述组合函数 - 任意深层子组件用
inject('playbackContext')获取控制能力 - 配合
Teleport把控制面板渲染到 body 下，仍能访问同一份上下文
这保证了 UI 布局自由度和状态一致性兼顾，特别适合构建“一处控制、多处响应”的音视频控制中心。
