本文作者：张鑫旭、踹歪

原创声明：本文为阅文前端团队 YFE 成员出品，请尊重原创，转载请联系公众号 ( id: yuewen_YFE ) 获取授权，并注明作者、出处和链接。

本文源自阅文前端团队踹歪面授分享，我只是代笔变成文字版，欢迎关注这位“精通 javascript 单词拼写”小伙伴。

一、视频加载的 3 次请求

在座诸位，请打开浏览器，新开一个标签页，打开开发者工具，切换到 network 面板 → Media 选项，然后 — 复制下面地址（天猫某活动备份地址）到地址栏，回车：http://ali-tmhly.h5.neone.com.cn/ 。此时，你会看到一个名为 video2 的 mp4，前前后后发送了 3 次请求：

这是糟糕的！应该只有 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使用图文教程”。

2. ffmpeg 指令

如下：

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

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

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

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

四、优化之后

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

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

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

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

查看更多分享，请关注阅文集团前端团队公众号: