用 reactive 管理视频播放器多轨道进度状态，即封装主视频、字幕、音频、标记点等轨道的 currentTime、isLoaded、isPaused、enabled 及配置信息于统一响应式对象，并以主视频 timeupdate 为基准同步各轨道时间，避免直接赋值子对象以保持响应性。
用 reactive 管理视频播放器的多轨道进度状态，核心是把每个轨道（比如主视频、字幕轨道、音频轨道、标记点轨道）的独立时间线和控制逻辑封装进一个响应式对象，而不是用多个零散的 ref。这样既能保持状态统一，又便于在切换轨道、同步播放、回放对比等场景下做联动处理。
1. 定义多轨道响应式状态结构
每个轨道不是简单存个 currentTime，而是包含完整的时间元信息：
-
当前播放时间（
currentTime） -
是否已加载完成（
isLoaded） -
是否处于暂停态（
isPaused） -
轨道启用开关（
enabled） - 关联的媒体源或配置（如字幕 URL、音轨语言标签）
示例代码：
import { reactive } from 'vue'
<p>const mediaTracks = reactive({
video: {
currentTime: 0,
isLoaded: false,
isPaused: true,
enabled: true,
src: '/videos/lesson.mp4'
},
audio: {
currentTime: 0,
isLoaded: false,
isPaused: true,
enabled: true,
language: 'zh-CN',
src: '/audios/lesson-zh.m4a'
},
subtitles: {
currentTime: 0,
isLoaded: false,
isPaused: true,
enabled: false,
language: 'zh-CN',
src: '/subtitles/lesson-zh.vtt'
},
markers: {
currentTime: 0,
isLoaded: true,
isPaused: false,
enabled: true,
points: [
{ time: 32, label: '重点概念' },
{ time: 148, label: '实操演示' }
]
}
})</p>2. 统一时间驱动与轨道同步
主视频的 timeupdate 事件是时间基准源。其他轨道不各自监听自己的 timeupdate（它们可能没有原生事件），而是通过计算差值或映射关系同步到主轨道时间：
立即学习“前端免费学习笔记（深入）”；
- 字幕轨道：根据
video.currentTime查找当前应显示的字幕段 - 标记点轨道：遍历
markers.points判断是否到达某标记时间 - 音轨：若需独立控制（如双语切换），则只在切换时重置其
currentTime为当前主轨道时间
关键逻辑示例：
// 在 onMounted 或播放器初始化后绑定
videoRef.value.addEventListener('timeupdate', () => {
const t = videoRef.value.currentTime
// 同步所有启用的轨道
if (mediaTracks.audio.enabled) {
mediaTracks.audio.currentTime = t
}
if (mediaTracks.subtitles.enabled) {
mediaTracks.subtitles.currentTime = t
}
// 标记点自动触发（仅一次）
const marker = mediaTracks.markers.points.find(p =>
Math.abs(p.time - t) < 0.3 && !p.fired
)
if (marker) {
marker.fired = true
console.log('到达标记点：', marker.label)
}
})
3. 支持轨道级独立操作与状态隔离
虽然共用一个 reactive 对象，但每个轨道的状态变更互不影响。例如点击“关闭字幕”只改 mediaTracks.subtitles.enabled = false，不会干扰视频或音轨的播放状态。同时，你可以在模板中直接解构使用：
<template>
<div class="subtitle-line" v-if="mediaTracks.subtitles.enabled">
{{ getCurrentSubtitle(mediaTracks.subtitles.currentTime) }}
</div>
<div class="marker-indicator" v-if="mediaTracks.markers.enabled">
{{ getActiveMarkerLabel(mediaTracks.video.currentTime) }}
</div>
</template>
配合 computed 可进一步封装轨道行为，比如：const activeSubtitle = computed(() => getCurrentSubtitle(mediaTracks.subtitles.currentTime))
4. 注意事项与边界处理
使用 reactive 管理多轨道状态时，有几点容易出错：
- 避免直接赋值整个子对象（如
mediaTracks.video = {...}），会丢失响应性；应逐字段更新或用Object.assign - 动态新增轨道（如运行时加载第 4 条音轨）需用
Vue.set或reactive({...old, newTrack})替换整个对象 - 轨道间时间不同步时（如网络延迟导致字幕滞后），建议加缓冲标记
syncOffset: -0.2字段做校准，而非硬改currentTime - 销毁播放器时，记得清理相关事件监听，否则
reactive对象仍会响应已卸载组件的副作用
