视频优化多次请求问题

https://segmentfault.com/q/1010000005932321

请求视频这类文件的时候因为响应会很大，如果全部下载下来再播放会等待很长时间，用户体验不好，所以服务器会允许浏览器使用range头来请求视频的某一部分，并设置以206的响应码进行响应，来使浏览器可以边播放边请求，优化用户体验。所以会出现状态码为206的响应。
另一方面，浏览器只有在获取到视频的元信息（metadata）后才开始播放视频，而一般不经过优化的视频，其元数据信息存在视频文件末尾。所以会出现连续三个请求的情况：第一个请求是先从0字节找视频的元数据信息，没找到的话，会继续发起一个请求到视频末尾去找，等找到以后，又会重新开始一个请求从视频开头处开始请求，此时视频才开始播放。如果视频经过优化，元数据信息在视频开头，就只会有一个请求了，所以推荐使用HandBrake这类的工具对视频经过网络优化后再上传。

作者：风萧萧梦也潇潇
链接：https://segmentfault.com/q/1010000005932321#answer-1020000019027715
来源：SegmentFault 思否
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

https://www.zhangxinxu.com/wordpress/2018/12/video-moov-box/

 

 

复制下面地址（天猫某活动备份地址）到地址栏，回车：

http://ali-tmhly.h5.neone.com.cn/

此时，你会看到一个名为 video2 的 mp4，前前后后发送了 3 次请求：

//zxx: 注意，一定要按上面步骤操作，因为只会在第一次时候出现

这是糟糕的！应该只有 1 次请求才是最佳的！

更糟糕的是，这种视频 3 次请求的现象非常普遍！

更更糟糕的是，很多前端开发都没有意识到有这个问题。

二、3次请求的原因

一个MP4视频文件，不单单是视频内容，还有很多其他信息，尺寸，时长，字幕，版权信息等。

这些信息被放在一个一个的 box 中，换句话说就是，一个 MP4 文件由很多个 box 组成的，用以存储媒体信息。

其中，有个与请求数有关的box名叫MOOV BOX。

MOOV BOX

Moov box 存放的是如何播放视频的信息，如尺寸和每秒的帧数，则存储在叫做 moov 的特殊 box 中。你可以认为 moov box 是某种意义上的 MP4 文件目录。

当你播放视频时，程序会查找 MP4 文件，定位 moov box 的位置，然后借此去查找视频和音频的起始位置来开始播放。

Box 可能以任意顺序排列，所以程序一开始并不知道 moov box 哪里。如果是本地播放，没有任何问题，因为你已经拥有整个视频文件；但如果在线观看，也就是流传输 HTML5 视频时，就会有问题了。

读取 MOOV 过程

浏览器直接发起 HTTP MP4 请求，读取响应 body 的开头，如果发现 moov 在开头，就接着往下读
mdat。如果发现开头没有，先读到 mdat，立马 RESET 这个连接，节省流量，通过 Range 头读取文件末尾数据，因为前面一个 HTTP 请求已经获取到了 Content-Length ，知道了 MP4 文件的整个大小，通过 Range 头读取部分文件尾部数据也是可以读取到的。

也就说，之所以上面天猫某活动 MP4 视频会发起 3 次请求，就是因为视频的 moov box 放在了文件末尾。我画了个图示意了下：

三、如何避免视频的3次请求

很简单，使用工具把 Moov box 提到视频的前面就好了。

具体可以：

1. Handbrake