🎬 最简单的Video播放器

HTML5 <video> 元素基础示例

核心代码

<video src="video.mp4" controls></video>

controls 属性会添加浏览器默认的播放控制条。

MP4 盒子结构对比

MP4 文件由多个"盒子"(Box)组成，moov 包含元数据，mdat 包含实际音视频数据。 Fast Start 文件将 moov 放在 mdat 之前，允许边下载边播放。

📁 bigmp4-moov-first.mp4 Fast Start

ftyp
0x0032B
→
moov
0x20306KB
→
mdat
0x4B2B664MB

moov 在文件开头

📁 bigmp4-moov-end.mp4 非 Fast Start

ftyp
0x0020B
→
mdat
0x1C64MB
→
moov
0x3D55605344KB

moov 在文件末尾 

# 使用 mp4box 查看盒子信息
mp4box -info bigmp4-moov-first.mp4
# 输出: Progressive (moov before mdat) ✓

mp4box -info bigmp4-moov-end.mp4
# 输出: (无 Progressive 标记) ✗