Vue 3 中音视频进度同步逻辑复用的核心是：封装组合式函数统一管理播放状态与时间控制，通过 Pinia 实现跨组件进度共享，用自定义指令处理拖拽交互，并借助 provide/inject 与 Teleport 支持嵌套场景下的状态透传。

Vue 3 中实现音视频进度同步的逻辑复用，核心是把“播放状态监听、时间更新、拖拽控制、跨实例同步”这些共性能力抽离成可组合、可共享的逻辑单元，而不是在每个组件里重复写 timeupdate、seeking、watch 等逻辑。

用组合式函数封装通用进度控制逻辑

将音频/视频元素的引用、当前时间、总时长、播放状态、拖拽开关等统一管理，对外暴露标准化接口：

• 接收 ref 作为输入源
• 内部自动监听 timeupdate、durationchange、loadedmetadata 等事件
• 提供 setCurrentTime()、play()、pause() 等方法
• 返回响应式状态如 currentTime、duration、isPlaying

这样，多个播放器组件（比如列表中的多个音频项）都能调用同一份逻辑，避免重复绑定事件或手动同步。

用 Pinia 或全局 store 实现跨组件进度共享

当需要多个播放器保持进度一致（如主视图与弹窗、PC 与移动端），应把进度状态提升到全局 store：

• 定义一个 usePlaybackStore()，包含 currentProgress: ref(0)、playing: ref(false)、activeId: ref(string)
• 各播放器组件通过 watchEffect 监听 store 的 currentProgress，并在非拖拽状态下主动同步自身 currentTime
• 拖拽开始时暂停 watch，拖拽结束时触发 store.setCurrentProgress(value) 并广播更新

这种模式天然支持多端协同——比如手机端拖动进度，PC 端播放器实时跳转，无需轮询或 WebSocket。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

用自定义指令统一处理拖拽交互

进度条的点击跳转、鼠标/触摸拖拽行为高度相似，适合封装为指令：

• 定义 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 布局自由度和状态一致性兼顾，特别适合构建“一处控制、多处响应”的音视频控制中心。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！