阶段 3 · 码流容器基础22 分钟
容器与解复用：MP4 不是 H.264
Container、Track、Sample、Mux / Demux 与索引
理解 MP4、WebM、Matroska 如何把多条音视频码流、时间戳、索引和元数据组织成可定位的媒体资源。
LEARNING GOALS
先明确本课目标
1
区分容器与 Codec
2
理解 Track、Sample 与 Chunk
3
解释 Demuxer 输出什么
MENTAL MODEL · 再建立心智模型
Codec 决定“每条轨道的内容怎样压缩”，容器决定“多条轨道怎样装在一起、每个样本何时播放、从哪里找”。
MINIMAL EXAMPLE
解复用器吐出来的是像素吗？
解复用器输出的是属于某条 Track 的压缩 Sample/Packet，以及 PTS、DTS、duration、keyframe 标记等元数据；解码器才把它还原为帧或 PCM。
javascriptconst packet = {
track: 'video',
codec: 'avc1.640028',
pts: 9000,
dts: 6000,
duration: 3000,
key: false,
data: encodedBytes,
};- 标明所属轨道 Demuxer 依据容器索引把 Sample 分发给音频或视频队列。
- 保留时间信息 PTS/DTS/duration 决定解码和展示调度。
- 数据仍是压缩态 data 必须交给匹配 Codec 的解码器。
容器层把一份交错文件拆成多条带时钟的压缩 Packet 流，而不是直接生成画面。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频原理Keyframe容器或传输层标记的可随机访问图像，播放器可从这里开始建立解码状态。音视频原理Elementary Stream单一音频或视频 Codec 的连续压缩码流，不包含多轨容器组织。音视频原理Media Container组织多条压缩轨道、时间戳、索引和元数据的文件或流格式，例如 MP4、WebM。音视频原理Demuxing解析容器并把交错的音视频 Sample 分离成各轨道压缩 Packet 的过程。音视频原理Compressed Packet容器或协议交付给解码器的压缩数据单元，携带轨道、时间戳和关键帧等信息。音视频基础Codec把原始音视频压缩成编码数据并负责反向解码的算法与实现，例如 Opus、AV1、H.264。音视频原理Muxing把多条音视频轨道的压缩 Sample、时间戳、索引和元数据组织进同一容器的复用过程。音视频原理Track容器中一条有独立格式、时间戳和 Sample 序列的逻辑媒体轨道，例如视频轨、音轨或字幕轨。音视频原理Sample容器轨道按时间组织的一个压缩媒体单元，携带大小、时长、时间戳和同步标记；它不等同于 PCM 的单个采样点。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
画出一个包含视频、音频、字幕、索引和 Codec 配置的最小容器结构。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
容器负责组织，不负责解压
Demuxer 解析文件结构和索引，把音频、视频 Sample 与时间戳分别交给对应解码器。它通常不理解像素或 PCM 内容。
扩展名不能推出 Codec
MP4 可封装 H.264、H.265、AV1、AAC 等不同编码组合；WebM 也可封装 VP9、AV1、Opus。播放能力必须同时考虑容器和轨道 Codec。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
HTMLMediaElement 内建 Demux，WebCodecs 需要应用提供；原生播放器通常显式接入 Demuxer。
WebGL
libavformat、MediaExtractor、AVAssetReader 等直接输出带时间戳的压缩 Sample/Packet。
WebGPU
普通播放由浏览器解析容器；WebCodecs 本身不提供通用 MP4/WebM Demux。
当你选择 WebCodecs 自建播放器时，容器 Demux 和 Mux 会成为必须补齐的一层。