阅读 676

【前端性能优化指南】5.5 - 优化你的视频资源

视频

🔝 页面静态资源 | 🔙 上一站 - 字体

视频作为一种重要的媒体形态,在网站中使用可以提高网站内容的丰富性,但同时对网络加载来说也是一个负担。所以会出现一些如下针对 Web 上视频的优化。

1. 使用合适的视频格式

与图片类似,不同的视频编码格式,其数据大小也大都不同。目前在 HTML5 Video 中常用的格式为 MPEG-4。除了 MPEG-4 之外,还支持一种叫 WebM 的新的视频格式。

WebM(VP9) 相较于 MPEG-4(x264) 来说会更小,不过兼容性(2021.6.5)相对来说也较差。因此可以考虑在 <video> 中指定多个 <source>

<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. 移除不必要的视频

对于不需要使用视频的场景,最好的优化方法就是去掉视频。例如在小屏幕上,你可以通过媒体查询来避免下载视频:

@media screen and (max-width: 650px) {
    #hero-video {
        display: none;
    }
}
复制代码

关于视频的优化这里只介绍了一些基本的手段,但对于一个重度的视频网站来说,会包含例如播放器 SDK 的优化、数据预取、码率自适应等更多的优化内容。参考资料包含 B 站的一个关于视频体验优化的分享[4],感兴趣的同学可以进一步阅读下。

此外,虽然上面介绍了一些视频处理的软件工具,但是如果有更高的定制化或集成需求,建议使用 FFmpeg[5]相关的库来处理。

喜欢的朋友欢迎关注我的博客RSS 订阅


「性能优化」系列内容

  1. 带你全面掌握前端性能优化 🚀
  2. 如何利用缓存减少远程请求?
  3. 如何加快请求速度?
  4. 如何加速页面解析与处理?
  5. 静态资源优化的总体思路是什么?
    1. 如何针对 JavaScript 进行性能优化?
    2. 如何针对 CSS 进行性能优化?
    3. 图片虽好,但也会带来性能问题
    4. 字体也需要性能优化么?
    5. 如何针对视频进行性能优化?(本文)
  6. 🔜 如何避免运行时的性能问题?
  7. 如何通过预加载来提升性能?
  8. 尾声

目前内容已全部更新至 ✨ fe-performance-journey ✨ 仓库中,陆续会将内容同步到掘金上。如果希望尽快阅读相关内容,也可以直接去该仓库中浏览。


参考资料

  1. a technial overview of the AV1
  2. Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018)
  3. Dynamic Adaptive Streaming over HTTP (Wikipedia)
  4. 2019 GMTC 分享 - B 站的视频体验进化之路
  5. FFmepg
  6. 8 Video Optimization Tips for Faster Loading Times
  7. Optimizing MP4 Video for Fast Streaming
  8. Web Performance 101: Video Optimization
文章分类
前端