多媒体：视频

对于一般的网站，25% 的带宽来自视频。优化视频有可能节省大量带宽，从而提高网站性能。

以下部分描述了以下优化技术

• 压缩所有视频
• 优化 <source> 顺序
• 从静音视频中删除音频
• 优化视频预加载
• 考虑流媒体

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

您的视频编辑软件可能具有减小文件大小的功能。如果没有，可以使用在线工具，例如 FFmpeg（在下面部分讨论），它可以编码、解码、转换和执行其他优化功能。

将视频源按从小到大排序。例如，给定 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（很差）。虽然 128 Kb 的视频看起来似乎比 10 MB 的下载可以提供更好的用户体验，但颗粒状的 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 性能
• 下一个