多媒体：视频

为什么需要优化您的多媒体？

对于平均网站而言，25% 的带宽来自视频。优化视频具有巨大的带宽节省潜力，可以转化为更好的网站性能。

优化视频传输

以下各节将介绍以下优化技术：

• 压缩所有视频
• 优化 <source> 顺序
• 为静音视频移除音频
• 优化视频预加载
• 考虑流式传输

压缩所有视频

大多数视频压缩工作都会比较视频中的相邻帧，目的是删除两帧中相同的细节。压缩视频并导出为多种视频格式，包括 WebM 和 MPEG-4/H.264。

您的视频编辑软件可能有一个减小文件大小的功能。如果没有，还有在线工具，例如 FFmpeg（在下一节中讨论），它可以进行编码、解码、转换以及执行其他优化功能。

优化 <source> 顺序

按从最小到最大的顺序排列视频源。例如，给定 10MB 和 12MB 的视频压缩格式，先声明 10MB 的资源。

<video width="400" height="300" controls="controls">
  <!-- WebM: 10 MB -->
  <source src="video.webm" type="video/webm" />
  <!-- MPEG-4/H.264: 12 MB -->
  <source src="video.mp4" type="video/mp4" />
</video>

浏览器会下载它识别的第一种格式。目标是先提供较小的版本，然后再提供较大的版本。对于最小的版本，请确保压缩程度最高的视频看起来仍然不错。有些压缩算法会让视频看起来（糟糕）像 GIF 动画。虽然 128KB 的视频可能比下载 10MB 的视频能提供更好的用户体验，但一个颗粒状的 GIF 式视频可能会损害品牌或项目的形象。

为首页视频移除音频

对于首页视频或其他没有音频的视频，移除音频是明智的。

<video autoplay="" loop="" muted playsinline="" id="hero-video">
  <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="web_banner.mp4" type="video/mp4" />
</video>

这段首页视频代码（上方）在会议网站和企业主页上很常见。它包含一个自动播放、循环播放且静音的视频。没有控件，因此无法听到音频。音频通常是空的，但仍然存在，并且仍在消耗带宽。对于始终静音的视频，没有理由传输音频。移除音频可以节省 20% 的带宽。

根据您选择的软件，您可能可以在导出和压缩时移除音频。如果没有，一个名为 FFmpeg 的免费实用程序可以为您做到这一点。这是用于移除音频的 FFmpeg 命令字符串：

ffmpeg -i original.mp4 -an -c:v copy audioFreeVersion.mp4

视频预加载

preload 属性有三个可用选项：auto、metadata 和 none。默认设置为 metadata。这些设置控制在页面加载时下载多少视频文件。您可以推迟下载不太受欢迎的视频来节省数据。

设置 preload="none" 会导致在播放之前不下载任何视频。它会延迟启动，但对于播放概率低的视频可以节省大量数据。

设置 preload="metadata" 可以提供更适度的带宽节省，它会在页面加载时下载最多 3% 的视频。这对一些大小适中的文件很有用。

将设置更改为 auto 会告诉浏览器自动下载整个视频。仅在极有可能播放时才执行此操作。否则，会浪费大量带宽。

考虑流式传输

视频流式传输允许将正确的视频大小和带宽（基于网络速度）传输给最终用户。与响应式图像类似，浏览器会接收正确大小的视频，从而确保快速的视频启动、低缓冲和优化的播放。

总结

优化视频有可能显著提高网站性能。与网站上的其他文件相比，视频文件相对较大，因此始终值得关注。本文将介绍如何通过减小文件大小、使用（HTML）下载设置以及使用流式传输来优化网站视频。

• 上一页
• 概述：Web 性能
• 下一页