多个video元素时间轴对齐需以主视频驱动从视频的currenttime和状态，主动同步而非被动监听，并处理跨域、ios限制、自动播放策略；需设置唯一id、添加muted和crossorigin属性、确保cors头正确；可选capturestream实现同源内容镜像；辅以timeupdate周期校准防漂移。
多个 video 元素之间实现时间轴对齐，关键不是让它们“看起来同步”，而是让它们的 currentTime 值在任意时刻都严格一致，并响应同一操作（播放、暂停、跳转）。这需要主动控制而非被动监听，且必须处理跨域、iOS限制、自动播放策略等现实约束。
用主视频驱动所有从视频的 currentTime 和状态
核心逻辑是：只在一个视频（主视频）上响应用户交互，其余视频全部由 JavaScript 主动同步。不能依赖各自独立的事件触发，否则初始偏移、解码延迟、缓冲差异会迅速导致脱节。
- 为每个
<video></video>设置唯一id（如id="main"、id="sub1"），避免用标签名模糊选择 - 监听主视频的
play、pause、seeked等事件，在回调中统一调用从视频的play()、pause()和currentTime = main.currentTime - 特别注意首次
play()：所有视频都应加muted属性，iOS 和 Chrome 才允许静音状态下自动播放，否则从视频可能被静默拦截
确保跨域资源可写入 currentTime
如果视频来自 CDN 或其他域名，浏览器会因安全策略阻止设置 currentTime——这不是报错，而是静默失败。必须提前确认服务端返回了正确的 CORS 头。
- 视频资源响应头需包含
Access-Control-Allow-Origin: *（或指定域名） - HTML 中对应
<video></video>标签要加crossorigin="anonymous" - 可在控制台检查
video.readyState：若长期为0（HAVE_NOTHING），大概率是跨域拒绝导致无法加载元数据
用 captureStream 实现内容级镜像（适合同源/处理流场景）
当多个视频展示的是同一内容的不同版本（如原画 vs 滤镜、主视角 vs 分析图），captureStream() 是更轻量、更可靠的同步方式——它复用渲染输出，天然无时间差。
- 主视频播放后，调用
mainVideo.captureStream()获取 MediaStream - 将该流赋给从视频：
subVideo.srcObject = stream - 此时从视频不再加载独立资源，而是实时镜像主视频画面；控制主视频即控制全部
- 注意：该方案不适用于不同源、不同内容的视频，且部分浏览器对
captureStream()的音频支持有限
运行时微调防漂移（高精度场景必备）
即使初始同步良好，长时间播放后仍可能因解码延迟、帧丢弃、系统调度等原因产生几十毫秒偏移。需周期性校准。
- 监听主视频的
timeupdate事件，每 200–500ms 检查一次各从视频的currentTime - 若偏差超过 40ms，执行
subVideo.currentTime = mainVideo.currentTime - 校准前先判断
subVideo.readyState >= HAVE_FUTURE_DATA，避免写入无效时间点触发错误 - 不要高频强制重置（如每帧都设），否则可能引发卡顿或重缓冲
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
