阶段 3 · 码流容器基础22 分钟
PTS、DTS 与音画同步：什么时候解，什么时候播
Time Base、Decode Order、Presentation Order 与 Master Clock
用 B 帧重排和音频连续播放理解 DTS、PTS、Time Base，以及播放器如何用主时钟决定等待、展示或丢帧。
LEARNING GOALS
先明确本课目标
1
区分 PTS 与 DTS
2
将整数时间戳乘 Time Base 得到秒
3
解释音画同步的等待与丢帧
MENTAL MODEL · 再建立心智模型
DTS 是“现在轮到谁进解码器”，PTS 是“解出来后什么时候登台”；Time Base 是刻度单位，主时钟是整场演出的指挥。
MINIMAL EXAMPLE
为什么 PTS=9000 不能直接理解为 9000 毫秒？
PTS 只是某条流时间刻度上的整数。只有乘以对应 time base 才得到秒；例如 1/90000 的视频时基中 9000 表示 0.1 秒。
javascriptconst pts = 9000;
const timeBase = { num: 1, den: 90000 };
const seconds = pts * timeBase.num / timeBase.den;
const delay = seconds - masterClockSeconds;- 读取流的时基 num/den 定义一个 timestamp tick 有多少秒。
- 换算统一秒数 整数 PTS 乘 time base 后才能跨流比较。
- 与主时钟求差 正值表示应等待，明显负值表示画面已迟到。
PTS=9000 在 90kHz 时基中是 0.1 秒，而不是 9 秒或 9000 毫秒。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频原理B-frame可利用前后参考列表进行双向预测的编码图像，常引入解码与显示重排。音视频原理PTSPresentation Timestamp，表示解码后帧应在媒体时间轴上展示或播放的时间。音视频原理DTSDecode Timestamp，表示压缩数据应按什么时刻或顺序进入解码器。音视频原理Time Base媒体时间戳整数的单位比例，timestamp 乘以 num/den 才得到秒。音视频原理A/V Sync依据共同主时钟协调音频样本和视频帧在正确时间输出的机制。音视频原理Frame Reordering存在双向预测帧时，压缩数据的解码顺序与画面的呈现顺序不同，解码器需按 PTS 重新排队输出。音视频原理Master Clock播放器选择的同步基准时钟；音频、视频或外部时钟之一作为主时钟，其他输出据此等待、追赶或丢帧。音视频原理Decode Order压缩图像送入解码器并建立参考关系的先后顺序，常由 DTS 表达；存在 B 帧时可能不同于展示顺序。音视频原理Presentation Order解码后画面真正显示给观众的先后顺序，常由 PTS 表达；播放器需将重排后的帧按此顺序输出。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一个带同步阈值和帧丢弃策略的简化视频调度器。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
时间戳是整数刻度
容器常用整数 timestamp 配合 time_base 表达时间，避免浮点累计误差。不同 Track 的 time base 可能不同，比较前要换到统一时间域。
播放器围绕主时钟调度
常以音频设备时钟为主，因为声音连续输出不易随意停顿。视频 PTS 早则等待，晚得太多则可能丢帧追赶。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
Web 播放器大多隐藏 A/V Sync，原生自研播放器必须显式维护时钟和队列。
WebGL
播放器将 Packet/Frame PTS 换算成秒，与 audio clock、video clock 或 external clock 比较。
WebGPU
HTMLMediaElement 内部完成音画同步；WebCodecs 自建管线需要应用依据 timestamp 调度帧。
播放器同步的本质不是“同时解码”，而是让不同输出在同一主时钟上按 PTS 到达。