//zxx: 本文首发于阅文集团前端团队公众号，内容源自阅文前端团队踹歪的一次面授分享，我代笔变成文字版，欢迎关注这位“精通 javascript 单词拼写”小伙伴。内容很有价值，所以我自己博客也发一遍，免得湮没。

一、视频加载的3次请求

在座诸位，请打开浏览器，新开一个标签页，打开开发者工具，切换到 network 面板 → Media选项，然后——

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

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

HandBrake乃Web MP4视频优化工具不二之选，其中就有 moov box 前置优化web请求的功能。

HandBrake MAC，Windows均支持，免费开源，更多能力，如视频压缩等，可以参见我之前写的这篇文章：“HandBrake乃Web MP4视频免费压缩工具不二之选”。

2. ffmpeg指令

如下：

ffmpeg -i 你的视频.mp4 -movflags faststart -acodec copy -vcodec copy 输出的视频.mp4

FFmpeg官网地址：http://ffmpeg.org/

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。

总之，很强，大家有兴趣可以自行探索一番。

四、优化之后

优化后，可以看到 Moov 信息前置了：

此时，视频请求就只有一次了，口说无凭，直接看证据，狠戳这个demo，起点某视频活动。

可以看到，加载的时候，就只会有1个请求：

赶快看看自己项目中的视频有没有3次请求的问题吧！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8332

（本篇完）