阶段 4 · 播放链路进阶32 分钟
完整播放链路：从网络字节到屏幕与扬声器
I/O → Buffer → Demux → Decode → Sync → Render / Audio Output
把前面的概念连成一条端到端播放管线，观察每个队列的输入输出、线程边界、缓冲目标和失败模式。
LEARNING GOALS
先明确本课目标
1
说出完整播放阶段及数据形态
2
理解 Packet Queue 与 Frame Queue
3
定位卡顿、花屏、音画不同步分别可能发生在哪层
MENTAL MODEL · 再建立心智模型
播放器是一组用时间戳连接的生产者—消费者队列：网络生产字节，Demux 生产 Packet，Decoder 生产 Frame，时钟决定何时消费。
MINIMAL EXAMPLE
为什么播放器不能收到一个包就一路同步处理到底？
网络、解复用、音频解码、视频解码和设备输出拥有不同速度与抖动。有限队列让各阶段解耦并提供缓冲，同时需要上限形成背压。
javascriptasync function decodeLoop() {
while (!stopped) {
const packet = await videoPacketQueue.pop();
const frames = await decoder.decode(packet);
for (const frame of frames) {
await videoFrameQueue.push(frame); // 满时等待
}
}
}- 等待上游 Packet 队列为空代表数据尚未准备，不应忙循环。
- 解码产生零到多帧 一个 Packet 与输出 Frame 不保证一一对应。
- 满队列形成背压 下游过慢时暂停生产，避免内存无限增长。
各阶段可在不同线程或异步任务运行，同时由有限队列控制内存、吞吐和延迟。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频原理Packet Queue连接 Demux 与 Decoder 的有界压缩数据队列，用于解耦速度和提供背压。音视频原理Frame Queue保存已解码 PCM 或视频帧并按 PTS 供输出线程消费的有界队列。音视频原理Playback Pipeline把网络或文件字节依次经过缓冲、解复用、解码、同步和输出，最终变成扬声器样本与屏幕画面的处理链。音视频原理Buffering提前保存一段待处理或待播放数据，用额外内存和启动延迟吸收网络、解码及设备时序的短时波动。音视频原理End-to-End Latency从媒体被采集或请求，到对应声音或画面真正输出之间的总延迟，包含网络、缓冲、编解码、排队与渲染。音视频原理I/OInput/Output（输入/输出）是文件、网络或设备与程序之间交换字节的边界；播放器通常先从 I/O 层读取容器数据。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
为点播、直播和视频通话各设计一组缓冲目标与降级策略。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
每层都改变数据形态
网络层是字节，Demux 后是压缩 Packet，Decode 后是视频 Frame/PCM，Render 后才成为屏幕像素和声卡缓冲。日志必须标明当前层。
队列在吞吐和延迟间取舍
缓冲越深越能抵抗网络与解码抖动，却增加启动和端到端延迟。直播、通话和点播会选择不同目标。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
浏览器提供托管播放器，原生允许替换每一层；两者背后的数据形态和时钟完全相同。
WebGL
FFmpeg + 平台 Codec + Audio/Graphics API 组合成显式多线程播放器。
WebGPU
audio/video 元素覆盖 URL 到输出全链路；MSE/WebCodecs/Web Audio/Canvas 可逐层接管。
先把每一层输入、输出、队列和时钟画出来，再决定 Web 或原生由谁托管。