html5中mediasource音视频对齐的核心是统一时间轴与精确写入分片时间戳。需使用带准确pts/dts的fmp4分片，服务端预加延迟或前端动态重写音频pts，双sourcebuffer按时间递增顺序严格交替写入，并通过timeupdate事件实时微调音频currenttime以维持恒定偏移。
在 HTML5 中用 MediaSource 实现音视频轨道延迟对齐，核心不是“分别控制两个轨道”，而是**统一时间轴 + 精确写入分片时间戳**。MSE 本身不提供“音频延迟滑块”功能，但你可以通过操控音视频分片的 PTS（Presentation Time Stamp）来实现等效效果。
确保 fMP4 分片自带可调时间戳
MSE 只信任分片内嵌的时间戳，不自动重排或偏移。所以对齐的前提是：你提供的音视频分片必须是 fragmented MP4（fMP4），且每个分片的 moof box 中包含准确、连续、可修改的 PTS/DTS。
- 服务端生成时就加入固定延迟：比如要让音频比视频晚 300ms 播放，就把所有音频分片的 PTS 全部 +0.3s（单位为 timescale 所定义的 tick）
- 前端动态重写 PTS：用 ffmpeg.wasm 或自研解析器读取 moof，修改 audio track 的 earliest_presentation_time 字段，再拼回 fMP4 二进制
- 避免直接改 video 分片时间戳——视频通常是主时间基准，动它会导致画面跳变或解码异常
双 SourceBuffer 写入时强制时间对齐
创建两个 SourceBuffer（一个 video/mp4，一个 audio/mp4）后，appendBuffer 的顺序和时间戳必须严格匹配：
- 先写入含 moov 的 init segment 到两个 SourceBuffer（确保编码参数一致）
- 后续 media segment 按时间递增顺序交替写入：例如视频分片起始 PTS = 10.0s → 音频分片起始 PTS = 10.3s → 视频下一分片 = 10.5s → 音频下一分片 = 10.8s
- 关键检查点：调用 appendBuffer 前，确认 sourceBuffer.timestampOffset === 0（默认值），否则浏览器会自动加偏移，干扰你的手动对齐
运行时微调：用 video.currentTime 反向驱动音频偏移
若因网络抖动或解码延迟导致轻微脱节（≤100ms），可在播放中动态补偿：
- 监听 video 元素的 timeupdate 事件，每帧读取 video.currentTime
- 计算当前应播放的音频时间：audioTargetTime = video.currentTime + targetDelay（如 +0.3）
- 若 audio.currentTime 与 audioTargetTime 偏差 > 40ms，执行 audio.currentTime = audioTargetTime（需保证 audio.readyState ≥ HAVE_FUTURE_DATA）
- 注意：该操作仅在 audio 已加载足够缓冲时生效；若频繁触发，说明分片时间戳本身有问题，应回溯前两步
验证是否对齐成功
不要只靠耳朵听，用工具确认：
- 用 ffprobe -v quiet -show_entries packet=pts_time,stream_index -of csv your_segment.mp4 查看音视频包 PTS 是否按预期错开
- 在浏览器 DevTools → Media 面板中开启 “Show timestamps”，观察 video 和 audio track 的 pts 曲线是否平行且恒定偏移
- 监听 video 元素的 onseeked 和 ontimeupdate，打印 Math.abs(video.currentTime - audio.currentTime) 的波动范围，稳定在 ±20ms 内即达标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
