超详细MP4格式分析

.MP4解析工具

mediainfo

mp4box:http://download.tsi.telecom-paristech.fr/gpac/mp4box.js/filereader.html

对于Mp4来说，都是一个个box来去组织元素。比如竖着的box，就是一个个box，这里就是重点关注moov。mp4⽂件由box组成，每个box分为Header和Data。其中Header部分包含了box的类型和⼤⼩，Data包含了⼦box或者数据，box可以嵌套⼦box。MP4⽂件的基本组成单元是box，也就是说MP4⽂件是由各种各样的box组成的，有parent box，还有children box。因此，这些boxes之间存在⼀定的层次关系，总结如下表所示，表中标记出了各个box必选或可选特性，√代表Box必选。

下图是⼀个典型mp4⽂件的基本结构：

Hexinator:

Mp4box和mediainfo对比。

这个trak，就是表示是多少路音频和视频。每一个AVstream都对应一个track。每个track，可能都有宽高信息，编译器信息，采样率，声道，time_base(time_scale)。

表示track width和heigth使用了4个字节。

视频和音频的时间刻度不一样。

音视频的handler也不一样。

比较重要的sample table。

一个MP4文件分为多个track，一个track分为多个chunk，一个chunk有多个sample。mp4数据索引和真正的数据分开区域存储。

先用数据索引找到moov，然后才能找到mdat。

下面的解释就是chunk1-84，都是一一对应1个sample，chunk85，一一对应2个sample，chunk86-88，一一对应一个sample，chunk89，一一对应2个sample，chunk90，一一对应一个sample。

可以根据sample size去读取每一帧数据的大小。

ftyp

File Type Box，⼀般在⽂件的开始位置，描述的⽂件的版本、兼容协议等。

moov

Movie Box，包含本⽂件中所有媒体数据的宏观描述信息以及每路媒体轨道的具体信息。⼀般位于放在⽂件末尾，但如果为了⽀持http边下载边播放则需要将moov提前。注意，当改变moov位置时，内部⼀些值需要重新计算。

mdat

Media Data Box，存放具体的媒体数据。

Moov Insider

mp4的媒体数据信息主要存放在Moov Box中，是我们需要分析的重点。moov的主要组成部分如下：

mvhd

Movie Header Box，记录整个媒体⽂件的描述信息，如创建时间、修改时间、时间度量标尺、可播放时⻓等。

下图示例中，可以获取⽂件信息如时⻓为 Duration: 5016 ms秒。

udta

User Data Box，⾃定义数据。

track

Track Box，记录媒体流信息，⽂件中可以存在⼀个或多个track，它们之间是相互独⽴的。

每个track包含以下⼏个组成部分：

tkhd

Track Header Box，包含关于媒体流的头信息。下图示例中，可以看到流信息如视频流宽度800，⻓度1920。

⾳频的tkhd，则⽐如duration、volume等。

mdia

Media Box，这是⼀个包含track媒体数据信息的container box。⼦box包括：

mdhd：Media Header Box，存放视频流创建时间，⻓度等信息。

hdlr：Handler Reference Box，媒体的播放过程信息。

minf：Media Information Box，解释track媒体数据的handler-specific信息。minf同样是个containerbox，其内部需要关注的内容是stbl，这也是moov中最复杂的部分。stbl包含了媒体流每⼀个sample在⽂件中的offset，pts，duration等信息。想要播放⼀个mp4⽂件，必须根据stbl正确找到每个sample并送给解码器。

mdia展开如下图所示：

mdhd

Media Header Box，存放视频流创建时间，⻓度等信息。视频的mdhd，Time scale，Duration等信息。

⾳频的mdhd，也类似视频，但要注意Time scale，我们在计算时间戳的时候都要使⽤该Time scale，对应我们流⾥⾯的AVStream->time_base。

hdlr

Handler Reference Box，媒体的播放过程信息。视频的hdlr，重点Component subtype: vide。

⾳频的hdlr，Component subtype: soun，如果我们多个⾳轨的时候，Component name:粤语。

我们分析的⽂件另⼀路⾳轨，根据不同的名字来进行区别。

minf

minf：Media Information Box，解释track媒体数据的handler-specific信息。minf同样是个containerbox，其内部需要关注的内容是stbl，这也是moov中最复杂的部分。stbl包含了媒体流每⼀个sample在⽂件中的offset，pts，duration等信息。想要播放⼀个mp4⽂件，必须根据stbl正确找到每个sample并送给解码器。

⽽且需要注意的是，minf⾥⾯的⼦容器，⾳频和视频轨是有区别的，⽐如视频轨：vmhd，⾳频轨则为：smhd

vmhd

smhd

Stbl Insider

Sample Table Box，上⽂提到mdia中最主要的部分是存放⽂件中每个sample信息的stbl。在解析stbl前，我们需要区分chunk和sample这两个概念。

在mp4⽂件中，sample是⼀个媒体流的基本单元，例如视频流的⼀个sample代表实际的nal数据。chunk是数据存储的基本单位，它是⼀系列sample数据的集合，⼀个chunk中可以包含⼀个或多的sample。

stbl⽤来描述每个sample的信息，包含以下⼏个主要的⼦box：

stsd

Sample Description Box，存放解码必须的描述信息。下图示例中，对于h264的视频流，其具体类型为 avc1 ，extensions中其中存放有sps，pps等解码必要信息。

视频的stsd

⾥⾯包含了avc1，avc1⾥⾯⼜包含了avcC和pasp。

avc1：包含了视频Width、Height。

avcC：包含了视频编码器相关的信息，包括sps、pps等信息。

⾳频的stsd

用Hexinator分析，包含了音频相关的信息，比如采样率，通道数。

stts

Time-to-Sample Box，定义每个sample时⻓。Time-To-Sample的table entry布局如下：

stts table entry布局

sample count：sample个数。

sample duration：sample持续时间。

持续时间相同的连续sample可以放到⼀个entry⾥达到节省空间的⽬的。这⾥先给出来的是视频的stts，Number of entries，这个参数需要注意并不是sample的个数，sample的实际数量需要将每个entry的sample count进⾏累加才是真正的sample个数。

下图示例中，第1个sample时间为3720，单位⽤mdhd的time scale进⾏换算，⽐如视频的是90000，此时换算成秒为3720/90000 = 0.0413333333333333秒。

再给出个⾳频的stts，只是mdhd的time scale的差别，之前我们看到⾳频为44100，则计算第⼀个sample的时间。1024/44100=0.0232199546485261秒。

stss

Sync Sample Box，同步sample表，存放关键帧列表，关键帧是为了⽀持随机访问。

stss的table entry布局如下：

stss table entry布局

下图示例中，该视频track有3个关键帧：

stsc

Sample-To-Chunk Box，sample-chunk映射表。

上⽂提到mp4通常把sample封装到chunk中，⼀个chunk可能会包含⼀个或者⼏个sample。Sample-To-Chunk Atom的table entry布局如下图所示：

First chunk：使⽤该表项的第⼀个chunk序号

Samples per chunk：使⽤该表项的chunk中包含有⼏个sample

Sample description ID：使⽤该表项的chunk参考的stsd表项序号

下图示例中，可以看到该视频track⼀共有1个stsc表项，chunk序列1-x，每个chunk包含⼀个sample。这⾥则说明每个chunk⾥⾯只有⼀个sample（⼀个chunk是可以有多个sample）。

stsz

Sample Size Box，指定了每个sample的size。Sample Size Atom包含两sample总数和⼀张包含了每个sample size的表。

sample size 表的entry布局如下图：

下图示例中，该视频流⼀共有110个sample，第1个sample⼤⼩为42072字节，第2个sample⼤⼩为7354个字节。

stco

Chunk Offset Box，指定了每个chunk在⽂件中的位置，这个表是确定每个sample在⽂件中位置的关键。该表包含了chunk个数和⼀个包含每个chunk在⽂件中偏移位置的表。每个表项的内存布局如下：

需要注意，这⾥stco只是指定的每个chunk在⽂件中的偏移位置，并没有给出每个sample在⽂件中的偏移。想要获得每个sample的偏移位置，需要结合 Sample Size box(stsz)和Sample-To-Chunk(stsc) 计算后取得。

下图示例中，该视频流第1个chunk在⽂件中的偏移为4750，⽽这⾥是每个chunk只有⼀个sample，此时第⼀个sample的起始位置就为4750->0x1D78，数据⼤⼩则参照stsz，第⼀个sample size为172818。

⽐如偏移位置，7544->0x1D78。

如何计算sample偏移位置

上⽂提到通过stco并不能直接获取某个sample的偏移位置，下⾯举例说明如何获取某⼀个pts对应的sample在⽂件中的位置。

⼤体需要以下步骤：

(1)将pts转换到媒体对应的时间坐标系。

(2)根据stts((decoding) time-to-sample)计算某个pts对应的sample序号。

(3)根据stsc(sample-to-chunk)计算sample序号存放在哪个chunk中。

(4)根据stco(chunk offset)获取对应chunk在⽂件中的偏移位置。

(5)根据stsz获取sample在chunk内的偏移位置并加上第4步获取的偏移，计算出sample在⽂件中的偏移。

例如，想要获取3.64秒视频sample数据在⽂件中的位置。

(1)根据time scale参数，将3.64秒转换为视频时间轴对应的3640000 (假如时间刻度不为毫秒)。

视频轨：time scale为90000，转成对应的时间戳为3.64秒*90000。

(2)遍历累加下表所示stts所有项⽬，计算得到3640000位于第110个sample = 327600。

(3)计算出多个sample_deltas叠加才到了327600，我们这⾥姑且按3780作为平均值计算，实际是3720*1+3780*1+3690*1+3780*2 ...... 这样⼀直叠加进⾏。327600/3780 =86.66666666666667，取整为86。

(4)查询下表所示stsc所有项⽬，计算得到第86个sample位于第86个chunk，并且在该chunk中位于第1个sample（因为我们的码流是每个chunk对应了⼀个sample）。

(5)查询下表所示stco所有项⽬，得到第86个chunk在⽂件中偏移位置为1004678。使⽤hexinator。

(6)查询下表所示stsz所有项⽬，得到第86个sample的size为20934。计算得到3.64秒视频sample数据在⽂件中。

offset：1004678+0 = 1004678

size：20934。

验证：⽤编辑器打开mp4⽂件，定位到⽂件偏移1004678位置。09分隔符，这⾥占⽤了6个字节，再看真正的数据区域，前4字节也为 NALU的⻓度0x000051bc=20924。

总共占⽤的字节计算 4+2+4+20924 = 20934。

《整理mp4协议重点，将协议读薄》:

⼀个chunk含有多个sample的情景参考下⾯链接进⾏分析：

mp4⽂件格式重点解析:https://www.jianshu.com/p/44c9567d8fcb

本篇文章就分析到这里，非常详细的MP4分析，如果对你有用，可以关注，点赞，收藏，转发。

文简介

在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。

本文简单讲讲如何使用 P5.js 播放视频。

播放视频文件

p5.js 除了可以使用 video 元素播放视频外，还支持使用 image 控件播放视频。

方式1：video元素播放视频

基础用法

p5.js 的 createVideo() 方法可以创建一个 <video> 元素。

createVideo(src, [callback]) 可以传入2个参数：

src: 视频路径（必传）。可以传一个字符串类型的视频路径；也可以传入字符串数组类型，指定多个路径支持不同浏览器。
callback: 回调函数（非必传）。在视频加载完成时触发。

录制 GIF 后比较卡，将就看着吧~

// 加载本地视频
let playing = false // 播放状态
let video = null // 视频
let button = null // 按钮

// 视频加载完成的回调函数
function afterLoad() {
  console.log('加载完成')
}

// 加载资源的生命周期
function preload() {
  video = createVideo('assets/02.mp4', afterLoad)
}

// 初始化的生命周期
function setup() {
  noCanvas()
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

// 点击按钮的事件
function toggleVid() {
  if (playing) {
    video.pause()
    button.html('播放')
  } else {
    video.loop()
    button.html('暂停')
  }
  playing = !playing;
}

粗略讲讲上面这段代码。

preload() 是 p5.js 提供的一个生命周期，我们通常会将“加载静态资源”这个步骤放在 preload() 里执行。在《p5.js光速入门》的图片章节里介绍过。
setup() 是一个初始化的生命周期。
createVideo() 方法加载视频。第二个参数传入回调函数 afterLoad，在加载完视频资源后会执行回调函数。
video.loop() 方法可以播放视频。
video.pause() 方法可以暂停视频。
noCanvas() 方法用来隐藏 <canvas> 元素，因为我们使用 createVideo() 会在页面创建一个 <video> 元素，所以我们就不需要 <canvas> 元素了。

播放方法

除了 video.loop() 方法，还可以使用 video.play() 播放视频。loop 是循环播放；play 只播放一次，播完就暂停。

传入多个视频地址

createVideo() 方法的第一个参数除了传入一个字符串类型的视频地址外，还可以传入字符串数组，作用就是兼容处理。

比如你的视频资源只有 2.mp4，你希望可以先播放 1.mp4，没有这个视频再播放 2.mp4，就可以这样写：

createVideo(['1.mp4', '2.mp4'])

但通常我们不会这样写，通常我们会给同一个视频提供不同的视频格式，然后用这种方法传入多个视频地址。

因为有些浏览器不一定支持你想播放的地址，此时就可以做个保底处理。

设置视频窗口尺寸

使用 createVideo() 方法创建完视频后，可以通过 size(width, height) 设置视频的宽高。

let video = null

function preload() {
  video = createVideo('assets/02.mp4')
  video.size(300, 600)
}

设置音量

使用 createVideo() 创建的视频控件可以使用 volume() 设置视频的音量，该方法接受1个参数，参数值在 0~1 之间。

let video = null

function preload() {
  video = createVideo('assets/02.mp4', videoLoaded)
}

function videoLoaded() {
  video.volume(0.5) // 将视频音量设置为50%
}

方式2：用image控件播放视频

一开始我也没想到 image 控件可以播放视频，误打误撞试出来的。

这次我就不录屏了，工友们自己运行试试看吧。

let playing = false
let video = null
let button = null

function preload() {
  video = createVideo('assets/02.mp4')
}

function setup() {
  video.hide()
  createCanvas(568, 320)
  button = createButton('播放')
  button.mousePressed(toggleVid)
}

function draw() {
  image(video, 0, 0)
}

function toggleVid() {
  if (playing) {
    video.pause();
    button.html('播放');
  } else {
    video.loop();
    button.html('暂停');
  }
  playing = !playing;
}

上面的代码中，我在 setup() 里使用了 video.hide() 方法将 createVideo() 创建出来的 <video> 元素隐藏起来，因为这次我们需要将视频渲染到画布中，所以不再需要 <video> 了。

接着我们在 draw() 里用 image 不断刷新视频，所以上面这样写是对的。

其他地方没变化。

接入摄像头

如果你的设备有摄像头，p5.js 是支持调用摄像头并将内容展示在画布上的。

let capture

function setup() {
  createCanvas(480, 360)
  capture = createCapture(VIDEO)
  capture.hide()
}

function draw() {
  image(capture, 0, 0, capture.width, capture.height)
}

通过 createCapture() 方法创建一个包含摄像头的音频/视频源 <video> 元素，把这个元素的内容放在 p5.js 的 image 控件里。

这个默认是显示的，而且它是一个独立的元素，默认和画布分离。所以使用 capture.hide() 方法把 <video> 元素隐藏起来，不然页面中会出现两个视频窗口。

其他做法和前面的【方式2】差不多，这里就不再啰嗦了。

一、视频

在HTML5时代，在网页中嵌入视频非常简单，只需要一个 video 元素，并设置它的 src 属性，使其链接一个视频地址就可以完全搞定了，这个太esay了

把这个网站在IE8中打开一看，网站上除了一片空白外，什么也没有，这是为什么呢？

原来 video 是HTML5最新引入的元素，并不是所有浏览器都支持它，IE8及以下版本都无法识别 video 标签。如果浏览器不识别 video标签，则会忽略它，当做什么都没有。这就是网站上一片空白的原因。

这个问题好解决，只需在 video 标签之间放置文本信息，不支持 video 标签的老浏览器，会显示 video 标签之间的文本信息，以提示用户浏览器不支持 video，就这么简单！

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在IE8上打开一看，确实显示了提示文本，这下好多了，至少用户知道自己的浏览器不能播放视频，该换浏览器了。

下载了Opera浏览器的最新版本25.0，打开一看，怎么还是一片空白外！Opera浏览器明明是支持video标签的，那又是为什么呢？

这个就得从视频的编码格式说起了。video 元素支持三种视频格式：Ogg、MP4、WebM。

Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀名为 .ogg；MP4是带有H.264视频编码和AAC音频编码的MP4文件，后缀名为 .mp4；WebM是VP8视频编码和Vorbis音频编码的文件，后缀名为 .webm。

这个Opera浏览器呢，它可以支持ogg，但不支持mp4。由于Opera支持video标签，故video标签之间的文本信息没有显示出来，但它不支持ogg，所以就不进行播放，最终导致页面出现一片空白。这下可怎么办呢？

其实办法有的是，我们可以从网上下载一副图像，放到视频播放窗口，如果视频无法播放，就显示这张图片，是不是更好呢？从网上下载一张美女图片，干脆叫beauty.jpg吧。那这个图像怎么添加到视频窗口呢？

video标签有个poster 属性，就是专门在视频窗口放置图片的。poster是一个video的占位符，无论什么情况下，只要视频还没有播放（视频下载过程中、视频不存在、不支持该视频类型、用户点击播放按钮前），就会显示该图像，可以看做是视频播放之前插入的宣传画或海报。

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上刷新一下，真的有一个美女冲着自己微笑呢。虽然视频没有播放出来，这回心情却是好多了。

那我可不能一天到晚只看美女呀，视频还是还是要想办法播放出来的。既然Opera浏览器不支持mp4，我们就换成需要ogg吧，这样就肯定没问题了。

我想了想，这个办法不好，万一某个浏览器只支持支持ogg，不支持mp4呢。这年头，什么都缺，就是不缺点子，随便在网上一搜，办法就有了。

在 video 元素中添加 source 元素，就可以解决这个问题。在source 元素中，通过 src 属性指定视频的地址，通过 type 属性指定视频的类型，以帮助浏览器决定是否能播放该视频。并且，在 video 元素中可以添加任意多个source 元素，让不同的 source 元素链接到不同的视频文件。

这样的话，当浏览器发现 video 元素时，首先会查看它本身是否定义了 src 属性。如果没有，就会检查 source 元素。浏览器会逐个查看这些视频源，直到找到一个可以播放的视频。一旦找到，就会播放它并忽略其他的视频源。我们干脆添加两个source，一个是mp4，一个是ogg，这下视频是一定能播放出来了。

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上又刷新一下，只有美女冲着我微笑，视频还是没播放出来。唉，太粗心了，忘记添加播放视频的控件了。

在video标签中，通过添加controls 属性来为视频添加播放控件，方便用户执行播放、暂停操作和音量控制。

（此处略去500字…）

</video>

在Opera浏览器上又刷新一下，效果真的不一样，这次不仅看到美女，还看到了视频控件。用鼠标猛戳一下那个播放按钮，哈哈，不错，真的听到美妙的旋律。我们的ogg文件，终于播放出来了，让我们好好享受一下吧O(∩_∩)O。

听了一会，忽然一想，不对呀，我刚才点了播放按钮后，等了半天才听到声音。能不能我一点播放按钮，就立即播放呢？

原来视频也是需要下载缓存的，点击播放按钮后，首先缓存，然后才播放的。那能不能在页面加载的同时就缓存呢。这样，用户点击播放后，就不必等待了。

这当然可以，在video标签中，通过添加preload属性来为视频添加预加载功能，在页面加载的同时加载视频。

（此处略去500字…）

</video>

关于 preload 属性，稍微再啰嗦一点，就是可以把它设置为 metadata，让浏览器仅仅预加载视频的基本信息，如尺寸、时长、以及一些关键的帧。这样的话，在开始播放之前，浏览器可以提前计算视频的显示尺寸。

既然一切都OK了！让我们看看mp4是不是能正常播放。下载最新版的Google Chrome 38.0浏览器，打开网页，猛戳一下播放按钮。

等等~，等等~，不对，怎么只有声音没有画面，明明是mp4格式的文件呀？使用暴风影音试了一下，是有画面的呀！

辛辛苦苦又在网上搜了一番，花了整整586秒，终于找到了答案。mp4视频需要h.264编码格式才会有图像的。

找了一个 h.264 编码格式的 mp4 试了一下，不错，确实有图像了！看了半天，原来是一部老外的电影，叽里咕噜一阵，一句话也没听懂。那O(∩_∩)O~，能否提供中文字幕呢，这样就不必费老大劲去听了！

HTML5中，通过在video元素添加track元素为视频添加字幕。字幕文件有两种格式：WebVTT和TTML。WebVTT是Web视频文本轨迹（Web Video Text Track），是UTF-8编码格式的文本文件；TTML是时序文本标记语言（Timed Text Markup Language），是XML格式的文件。两种文件的具体格式，已经超出我们的讨论范围。

video元素支持添加多个track元素，不同的track元素链接到不同的字幕文件。用户可以在各个字幕间进行切换。

</video>

track元素中，src属性指定字幕文件的URL；srclang属性字幕文件的语言类型，若kind 属性值是 "subtitles" 时，该属性必需的；label 属性指定字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时，会显示标签的名称；kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default属性指定是否是默认字幕，如果一个都没指定，将不会自动显示字幕。

除了字幕外，我还希望对视频进行过多的控制，比如让视频自动播放、循环播放、默认静音，以及视频窗口的尺寸等等，这些都能做到吗？

这已经不是什么事了，video 元素已经提供了相关属性，根据需要设置相应的属性就可以了。这些属性及含义见表 23：

HTML中嵌入视频和音频代码

哦，原来这么简单呀！那就到此为止吧，网页中嵌入视频的全部代码都在这里，就打包给你吧！

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

睁大眼睛一看，却只有7行代码。然而，就这区区7行代码，可把他折磨得够呛。

看着这一切都全部搞定，他仰望着天空，长长呼了一口气，显得是那么的放松，那么的惬意。此时，他闭上眼睛，在自己的梦幻世界里遨游！

二、音频

有了在网页中嵌入视频的经历，要在网页中嵌入音频，那简直就是小菜一碟了。只要把vedio元素换成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音频格式只有Ogg Vorbis、mp3 和 wav。还要知道，由于音频没有画面，也就没有 width、height、poster 属性，而其他属性都支持，并且跟视频的含义相同。

网页中嵌入音频的代码如下：

你的浏览器已经老掉牙了，不支持audio，还不赶快使用现代浏览器O(∩_∩)O~！

</audio>

在线咨询

上一篇：使用python的正则表达式的匹配规则P来匹配HTML标签及内容
下一篇：卡片布局样式弹出页面html页面前端源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

超详细MP4格式分析

文简介

播放视频文件

方式1：video元素播放视频

基础用法

播放方法

传入多个视频地址

设置视频窗口尺寸

设置音量

方式2：用image控件播放视频

接入摄像头

推荐阅读

一、视频

二、音频

您的项目需求