大前端视频
视频作为一种重要的媒体形态，在网站中使用可以提高网站内容的丰富性，但同时对网络加载来说也是一个负担。所以会出现一些如下针对 Web 上视频的优化。
1. 使用合适的视频格式
与图片类似，不同的视频编码格式，其数据大小也大都不同。目前在 HTML5 Video 中常用的格式为 MPEG-4。除了 MPEG-4 之外，还支持一种叫 WebM 的新的视频格式。
WebM(VP9) 相较于 MPEG-4(x264) 来说会更小，不过兼容性相对来说也较差。因此可以考虑在 <video> 中指定多个 <source>。
html
<video>
<source src="/static/video/me.webm" type="video/webm" />
<source src="/static/video/me.mp4" type="video/mp4" />
</video>
此外，使用 AV1 编码[1]会比 VP9(WebM) 小约 30%，比 x264(MPEG-4) 小约 45-50%[2]。
2. 视频压缩
对于视频，我们也可以进行有损与无损压缩，同样可以有效减少视频大小。下面列举了一些常用的工具：
3. 移除不必要的音轨信息
在上一节中我们提到，可以使用 <video> 代替 GIF 来实现动画，同时体积也会更小。由于在这种场景下本身就是不需要声音的，所以我们会将 <video> 设置为 muted。
那么，既然不需要声音，我们是不是可以直接移除掉音轨的数据？是的，这样做也会帮助进一步缩减视频的体积。
4. 使用“流”
尝试让浏览器使用“流”或者小分片的方式来播放你的视频，例如常用的 HLS (HTTP Live Streaming) 技术。简单来说，使用 HLS 技术，你的视频会包含一个 .m3u8 的索引文件和一系列包含播放内容的 .ts 分片。浏览器通过不断下载一小段的分片来进行视频播放，避免了完整视频下载的流量消耗。
你也可以尝试使用 MPEG-DASH[3] 这个技术，目前开源社区也有一个配套的客户端实现。
5. 移除不必要的视频
对于不需要使用视频的场景，最好的优化方法就是去掉视频。例如在小屏幕上，你可以通过媒体查询来避免下载视频：
css
@media screen and (max-width: 650px) {
#hero-video {
display: none;
}
}
关于视频的优化这里只介绍了一些基本的手段，但对于一个重度的视频网站来说，会包含例如播放器 SDK 的优化、数据预取、码率自适应等更多的优化内容，在 2019 GMTC 上，B 站分享了他们的缩减首帧耗时的一系列优化措施[4]。
此外，虽然上面介绍了一些视频处理的软件工具，但是如果有更高的定制化或集成需求，建议使用 FFmpeg[5] 或相关的库来处理。