HTML5 视频秒开优化-moov 前置

前言

本文是我部门的一次分享，张鑫旭老师也整理过相应文字版本我在补充下

现在创意 H5 做的堪比电影，传统方式的动画、gif 已经满足不了性能需求，越来越多的内容正在以 HTML5 视频的方式呈现，随之而来的视频优化变得的越来越重要。HTML5 视频秒播优化的有很多方面，从服务器，cdn 部署接入，数据连接 / 获取，客户端缓存，出帧策略，到视频文件 I 帧位置等，今天从视频文件格式的角度介绍。

一个活动

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

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

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 放在了文件末尾。

为什么会放在后面

因为在导出视频文件是时候一般软件都是先写入 mdat 后写入 moov，因此绝大多数工具都会默认把 moov 数据放到 mdat 后边，比如 mp4writer，ffmpeg 等工具

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

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

Handbrake
HandBrake 乃 Web MP4 视频优化工具不二之选，其中就有 moov box 前置优化 web 请求的功能。
ffmpeg
FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用 LGPL 或 GPL 许可证。它提供了录制、转换以及流化音视频的完整解决方案。

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

优化之后

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

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

前言