Visual LabINTERACTIVE LEARNING
知识库 概念
阶段 3 · 码流容器进阶28 分钟

MP4 边下边播：Fast Start、Range 与 fragmented MP4

moov / mdat、Progressive Download、fMP4、MSE 与分段流

解释一个 MP4 具备什么布局和服务条件才能尽早起播、支持 Seek，以及普通渐进下载与 fMP4 分段流的区别。

LEARNING GOALS

先明确本课目标

1

解释 moov 在文件头与文件尾的起播差异

2

理解 HTTP Range 对定位和 Seek 的作用

3

区分 Fast Start MP4 与 fragmented MP4

MENTAL MODEL · 再建立心智模型

播放器要先拿到“目录”才能解释后面的压缩样本：普通 MP4 的目录是 moov，fMP4 则先给初始化目录，再为每个片段附一张局部清单。

MINIMAL EXAMPLE

为什么把 moov 移到文件头就能更快起播？

moov 包含解码所需轨道配置、Sample 大小、时间戳、文件偏移和关键帧索引。播放器先解析它，才能从 mdat 找到第一批可解码 Sample。

最小例子javascript
const fastStart = ['ftyp', 'moov', 'mdat'];
const slowStart = ['ftyp', 'mdat', 'moov'];
const fragmented = [
  'ftyp', 'moov',
  'moof', 'mdat',
  'moof', 'mdat',
];
  1. 读取 ftyp 识别格式 文件类型 Box 告诉解析器兼容品牌，但不包含完整 Sample 索引。
  2. 提前解析 moov 轨道、Codec 配置和 Sample 表可用后，播放器能定位 mdat 中的数据。
  3. 按索引边取边解码 后续字节只要覆盖当前需要的 Sample，就可进入 Packet 与 Decoder 队列。

Fast Start MP4 可在未下载完整文件时启动；fMP4 则通过 moof 为每个片段持续提供局部 Sample 元数据。

本课概念
●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄
音视频原理MP4 Fast Start把 MP4 的 moov 元数据 Box 放到大块 mdat 媒体数据之前，使播放器能提前取得轨道和 Sample 索引并渐进起播。音视频原理Fragmented MP4先发送初始化 moov，随后用连续 moof+mdat 片段描述并承载媒体 Sample 的 MP4 组织方式。音视频原理HTTP Range允许客户端请求资源指定字节区间的 HTTP 机制，可用于读取尾部 moov、关键 Sample 与执行 Seek。音视频原理moovMP4 中保存轨道描述、时长、时间尺度以及 Sample 索引等元数据的 Box；播放器通常先解析它才能定位媒体数据。音视频原理mdatMP4 中承载实际压缩音视频 Sample 字节的 Media Data Box；其内容如何解释由 moov 中的表描述。音视频原理MSEMedia Source Extensions（媒体源扩展）让 JavaScript 把分段媒体追加到 SourceBuffer，再交给 HTMLMediaElement 连续播放。音视频原理Progressive Download播放器一边按普通 HTTP 资源顺序下载文件、一边在已获得索引和足够媒体数据后开始播放的方式；它不是自适应分段协议。
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

为点播文件、DASH 点播和低延迟直播分别选择 MP4 布局与分片时长，并说明原因。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

普通 MP4：先有 moov 才能读懂 mdat

moov 保存 Track、Time Base、Codec 配置和 Sample 表。若它在 mdat 前，播放器拿到文件开头即可规划解码；若在文件尾，则需先下载到尾部，或通过 HTTP Range 单独请求尾部。

02

fMP4：初始化一次，片段逐个追加

fragmented MP4 先发送含 ftyp+moov 的 Initialization Segment，之后每个 moof 描述紧随其后的 mdat Sample。MSE、DASH 和部分 HLS 工作流可按片段持续追加，适合自适应码率与直播。

●OPTIONAL · 迁移时查阅Web 与原生实现对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

Web 与原生都需要先取得 MP4 索引；Web 更常通过 Range/MSE，原生可直接控制 AVIO 与 Demuxer。

WebGL

libavformat 可在可 Seek 输入上跳到 moov，也可持续解析 fragmented MP4 的 moof/mdat。

WebGPU

video 元素可渐进读取 Fast Start MP4；MSE 应用追加 init segment 与后续 fMP4 media segments。

判断“能否边下边播”要同时看文件布局、服务器 Range/缓存头、播放器 Demux 能力三层。