js实现封装MP4格式文件并下载

注：基于bilibili的FLV.js实现

flv.js的github地址：github.com/Bilibili/fl…

MP4文件格式

综述

在MP4文件格式中，整个视频容器都是由多个box和子box组成，根据box类型主要分为3大类：视频类型（ftyp）、视频数据（mdat）、视频信息（moov）。视频信息（moov）用来描述视频数据（mdat）。（注：还有一个主要box为moof box，因这里仅解释普通MP4格式数据，moof box仅在流式MP4中使用。在流式MP4格式中，box排序、相同box的box body内容格式与普通MP4不一样，详情参见扩展）

视频参数（moov）中主要的子box 为track，每个track都是一个随时间变化的媒体序列，时间单位为一个sample，可以是一帧数据，或者音频（注意，一帧音频可以分解成多个音频sample，所以音频一般用sample作为单位，而不用帧）。Sample按照事件顺序排列。track里面的每个sample通过引用关联到一个sample description。这个sample descriptios定义了怎样解码这个sample，例如使用的压缩算法。（注：在目前的使用中，该值为1）

注：该文主要介绍普通mp4文件类型

MP4.box

在Javascript中，Mp4 的所有box全部由通过new Uint8Array() 实现。

box前8位为预留位，这8位中前4位为数据size，当size值为0时，表示该box为文件的最后一个box（仅存在于mdat box中），当size值为1时，表示该box的size为large size（8位），真正的box size要在largesize中得到（同样仅存在于mdat box中）。后4位为前面box type的Unicode编码。当type是uuid时，代表Box中的数据是用户自定义扩展类型。

Box由header和body组成，以32位的4字节整数存储方式存储到内存，开头4个字节（32位）为box size，后面紧跟的4位为box的类型。Box body可以由数据组成，也可以由子box组成。

一个box的结构如下：

视频与音频的参数不一样，一般情况下一个MP4文件区分为2个trak，一个为video trak，另一个是audio trak。每个track都有trakId，视频的trakId为1，音频的trakId为2。

整个MP4文件格式如下图

FTYP box

Ftypbox 是一个由四个字符组成的码字，用来表示编码类型、兼容协议或者媒体文件的用途。

在普通MP4文件中，ftyp box有且仅有一个，在文件的开始位置。

通过MP4reader工具，可以看出ftyp box的结构

Box size（4字节）：0x00000024：box的长度是36字节；

Boxt type（4字节）：0x66747970：“ftyp”的ASCII码，box的类型；

major_brand（4字节）：0x69736f6d：“isom“的ASCII码；

minor_version（4字节）：0x00000200：isom的版本号；

compatible_brands（12字节）：说明该文件兼容isom, iso2, avc1, mp41 四种协议。

Ftyp更多兼容协议 ： www.ftyps.com/

Mdat box

Mdat box 中包含了MP4文件的媒体数据，在文件中的位置可以在moov的前面，也可以在moov的后面，因我们这里用到MP4文件格式用来写mp4文件，需要计算每一帧媒体数据在文件中的偏移量，为了方便计算，mdat放置moov前面。

Mdat box数据格式单一，无子box。主要分为box header 和box body，box header中存放box size 和box type（mdat），box body中存放所有媒体数据，媒体数据以sample为数据单元。

这里使用时，视频数据中，每一个sample是一个视频帧，存放sample时，需要根据帧数据类型进行拼帧处理后存放。

H.264视频帧数据类型如下：

注：1、在目前实现中，I帧数据中暂不包含序列参数集（sps）和图像参数集（pps）。

2、以上帧数据仅针对视频帧数据。

在普通mp4中，在获取数据之前，需要解析每个帧数据所在位置，每个帧数据都存放在mdat中，而这些帧的信息全部存放在stbl box 中，所以，若要mp4文件能够正常播放，需要在写mp4文件时，将所有的帧数据信息写入 stbl box中。

Mdat box中，可能会使用到box的large size，当数据足够大，无法用4个字节来描述时，便会使用到large size。在读取MP4文件时，当mdat box的size位为1时，真正的box size在large size中，同样在写mp4文件时，若需要large size，需要将box size位配置为1。

Moov box

Moov box中存放着媒体信息，上面提到的stbl里存放帧信息，属于媒体信息，也在moov box里。Moov box 用来描述媒体数据。

Moov box 主要包含 mvhd、trak、mvex三种子box。

Mvhd box

Mvhd box定义了整个文件的特性

---

字段	长度(字节)	描述
尺寸	4	这个movie header atom的字节数
类型	4	Mvhd
版本	1	这个movie header atom的版本
标志	3	扩展的movie header标志，这里为0
生成时间	4	Movie atom的起始时间。基准时间是1904-1-1 0:00 AM
修订时间	4	Movie atom的修订时间。基准时间是1904-1-1 0:00 AM
Time scale	4	本文件的所有时间描述所采用的单位
Duration	4	媒体可播放时长
播放速度	4	播放此movie的速度。1.0为正常播放速度
播放音量	2