视频表现

在上一模块中，您学习了一些与 图片相关的性能技巧。图片是网络上广泛使用的资源类型，如果不注意优化图片并考虑用户的 视口，可能会消耗大量带宽。

不过，图片并不是网络上唯一常见的媒体类型。视频是网页上常用的另一种热门媒体类型。在了解一些可能的优化方法之前，首先务必要了解一些 元素的工作原理。<video>

视频源文件

处理媒体文件时，您在操作系统上识别的文件（.mp4、.webm 等）称为“容器” 。一个容器包含一个或多个“流” 。在大多数情况下，这会是视频流和音频串流。

您可以使用编解码器压缩每个流。例如，一个 video.webm 可以是 一个 WebM 容器，其中包含使用 VP9 压缩的视频流和使用 Vorbis 压缩的音频流。

了解容器和编解码器之间的区别很有帮助，因为 这有助于您使用更少的带宽压缩媒体文件， 从而缩短整体网页加载时间，并可能提升网页的 Largest Contentful Paint (LCP)指标。LCP 是一项以用户为中心的指标，也是三项Core Web Vitals指标之一。

压缩视频文件的一种方法是使用 FFmpeg：

ffmpeg -i input.mov output.webm

虽然上述命令在使用 FFmpeg 时非常基础，但它会使用默认的 FFmpeg 选项获取 input.mov 文件并输出 output.webm 文件。上述命令会输出一个较小的视频文件，该文件可在所有现代浏览器中运行。调整 FFmpeg 提供的 视频或 音频选项有助于 进一步减小视频的文件大小。例如，如果您使用 <video> 元素替换 GIF，则应移除音轨：

ffmpeg -i input.mov -an output.webm

如果您想进一步调整，FFmpeg 会在不使用可变比特率编码的情况下压缩视频时提供 -crf 标志。-crf 代表 Constant Rate Factor （恒定速率因子）。这是一项用于调整压缩级别的设置，它通过接受给定范围内的整数来实现此目的。

H.264 和 VP9 等编解码器支持 -crf 标志，但其使用取决于您使用的编解码器。如需了解详情，请参阅有关 constant rate factor for 在 H.264 中编码视频以及 constant quality when encoding videos in 在 VP9 中编码视频的文章。

多种格式

处理视频文件时，指定多种格式可作为不支持所有现代格式的浏览器的后备。

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

由于所有现代浏览器都支持 H.264 编解码器，因此 MP4 可用作旧版浏览器的后备。WebM 版本可以使用较新的 AV1 编解码器， 尚未得到广泛支持，或较早的 VP9 编解码器， 比 AV1 得到更好的支持，但通常不如 AV1 压缩得好。

poster 属性

视频的海报图片是使用 poster 属性 在 <video> 元素上添加的，该属性会向用户提示视频内容在开始播放之前可能是什么：

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

自动播放

根据 HTTP Archive 的数据，网络上 20% 的视频包含 autoplay属性。autoplay 当视频必须 立即播放时（例如用作视频背景或替换 动画 GIF 时），会使用。

动画 GIF 可能非常大，尤其是当它们包含许多具有复杂细节的帧时。动画 GIF 消耗数兆字节的数据并不罕见，这可能会大量消耗带宽，而这些带宽最好用于更重要的资源。您通常应避免使用动画图片格式， 因为 <video> 等效格式对于此类媒体来说效率更高。

如果您的网站需要自动播放视频，您可以直接在 <video> 元素中使用 autoplay 属性：

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

通过将 poster 属性与 Intersection Observer API 相结合，您可以 将网页配置为仅在视频位于视口内时下载视频。 poster 图片可以是低质量的图片占位符，例如视频的第一帧。视频出现在视口中后，浏览器会开始下载视频。这可以缩短初始视口中内容的加载时间。不利的一面是，当您为 autoplay 使用 poster 图片时，您的用户会收到一张图片，该图片仅在视频加载并开始播放之前短暂显示。

用户启动的播放

通常，浏览器会在 HTML 解析器发现 <video> 元素后立即开始下载视频文件。如果您有 <video> 元素，其中 用户启动播放，您可能不希望视频在用户与之互动之前开始下载 。

您可以使用 <video> 元素的 preload 属性来影响为视频资源下载的内容：

• 设置 preload="none" 会告知浏览器不应预加载任何视频内容 。
• 设置 preload="metadata" 仅会提取视频元数据，例如视频的 时长以及可能其他粗略信息。

如果您要加载 用户需要启动播放的视频，则设置 preload="none" 可能是最理想的情况。

在这种情况下，您可以通过添加 poster 图片来改善用户体验。这可让用户了解视频的大致内容。此外，如果 海报图片是您的 LCP 元素，您可以使用 <link rel="preload"> 提示以及 fetchpriority="high"来提高 poster 图片的 优先级：

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

延迟加载

视频表现方面相对较新的一个功能是 loading=lazy 属性。与 浏览器级图片延迟加载 和 iframe 延迟加载类似，此属性 为视频的 poster 和 preload 下载带来了相同的功能。

使用 poster 属性以及 preload="none" 或 preload="metadata" 已经可以避免默认下载视频，而 loading=lazy 属性 甚至会将海报图片和元数据的下载延迟到视频位于视口内或 即将进入视口时。

嵌入

考虑到优化和高效投放视频内容的复杂性，您可能希望将此问题交给 YouTube 或 Vimeo 等专用视频服务来处理。此类服务会为您优化视频的投放，但嵌入第三方服务中的视频可能会对性能产生自己的影响，因为嵌入的视频播放器通常会投放大量额外资源，例如 JavaScript。

鉴于这种情况，第三方视频嵌入可能会显著影响网页性能。根据 HTTP Archive 的数据，对于中位网站，YouTube 嵌入会阻塞主线程 超过 1.7 秒。长时间阻塞主线程是一个严重的用户体验问题，可能会影响网页的 Interaction to Next Paint (INP)指标。不过，您可以采取折衷方案，即在初始网页加载期间不立即加载嵌入，而是为嵌入创建一个占位符，当用户与之互动时，该占位符会被实际的视频嵌入替换。

视频演示

知识测验

接下来：优化网页字体

在介绍如何优化特定资源类型的文章中，接下来我们将介绍字体。 优化网站字体通常会被忽略，但它可能会 对网站的整体加载速度以及 LCP 和 Cumulative Layout Shift (CLS)等指标产生重大影响。