从天猫某活动视频3次请求提及

本文做者：张鑫旭、踹歪

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

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

1、视频加载的 3 次请求

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

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

更糟糕的是，这种视频 3 次请求的现象很是广泛！

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

2、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、如何避免视频的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 官网地址：ffmpeg.org/。

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

总之，很强，你们有兴趣能够自行探索一番。

4、优化以后

优化后，能够看到 Moov 信息前置了：

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

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

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

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