视频表现

在上一单元中，您了解了与 图片是网络上广泛使用的资源类型， 因为如果没有谨慎地优化它们，并导致用户的 都会考虑视口

不过，图片并不是网络上常见的唯一媒体类型。视频 是网页上常用的另一种常用媒体类型在了解 进行可能的优化，请务必先了解 <video> 有效。

视频源文件

使用媒体文件时，您可以在操作系统中识别出 （.mp4、.webm 等）称为容器。一个容器包含一个 一个或多个数据流。大多数情况下是视频和音频流。

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

了解容器和编解码器之间的区别很有帮助，因为 它可以帮助您使用显著减少的带宽压缩媒体文件， 从而缩短总体网页加载时间 网页的 Largest Contentful Paint (LCP)，这是一个以用户为中心的指标，并且 三个核心网页指标之一。

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

ffmpeg -i input.mov output.webm

前面的命令（虽然像使用 FFmpeg 时一样基本）- 将 input.mov 文件，并使用默认 FFmpeg 输出 output.webm 文件 选项。上述命令会输出较小的视频文件， 现代浏览器。调整 FFmpeg 提供的视频或音频选项 可帮助您进一步减小视频的文件大小。例如，如果你是 使用 <video> 元素替换 GIF，则应移除相应音轨：

ffmpeg -i input.mov -an output.webm

重要提示： -an 标志用于从输出文件中移除所有音频流。这是一项非常重要的 优化。 使用视频取代 动画 GIF - 因为移除音频流会减小视频的大小 即使源视频文件中已有的音频串流 静音。

如果你想做一些进一步的调整，-crf 在不使用可变比特率编码的情况下压缩视频。-crf 代表 恒定速率系数。此设置可调整 压缩，并且通过接受给定范围内的整数来实现。

H.264 和 VP9 等编解码器支持 -crf 标记，但其用法取决于 您使用的编解码器有关详情，请参阅 采用 H.264 格式对视频进行编码，同时采用恒定质量 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。

<ph type="x-smartling-placeholder">

</ph> 注意：与 <picture> 类似 元素，即您列出 <source> 子元素的顺序 <video> 元素中的元素决定了 。如果您先指定 MP4 来源，浏览器会选择该来源 而无论它是否支持更高效的格式 。

poster 属性

视频的海报图片是使用 <video> 中的 poster 属性添加的 元素，此类元素可提示用户在视频播放前 已启动：

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

注意：<video> 以前 不包含 poster 图片的元素不是 LCP 候选定位设置。 此问题后已得到解决，在视频文件的第一帧画面上 将被视为 LCP 候选广告。如果您的网站 大量使用视频文件，因此请务必使用 poster 属性，或确保 针对候选视频 LCP 进行了优化，以便能够尽快显示 如果未使用 poster 属性，则会发生该错误。

自动播放

根据 HTTP Archive 的资料，网络上有 20% 的视频包含 autoplay 属性。在必须播放视频时使用 autoplay 例如当用作视频背景或替代视频时， GIF 动画。

动画 GIF 可能会非常大，尤其是在有许多帧 复杂细节。对动画 GIF 使用多次 MB 级数据，这可能会造成带宽严重浪费， 获取更多关键资源通常应避免使用动画图片格式 因为 <video> 等效项对于此类媒体更高效。

如果您的网站要求自动播放视频，您可以使用 autoplay 属性：<video>

<!-- 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>

注意：<video> 元素与 指定的 autoplay 属性会立即开始下载，即使 如果它们位于初始视口之外，则会发生此错误。

通过将 poster 属性与 Intersection Observer API 结合使用，您可以 请将您的网页配置为仅在视频位于视口内时才下载视频。 poster 图片可能是低画质的图片占位符，例如第一张 视频帧。当视频显示在视口中后 下载视频。这样可以缩短 初始视口。缺点是，为 autoplay 使用 poster 图片时， 你的用户会收到的图片只会短暂显示，直到视频结束 并开始播放。

<ph type="x-smartling-placeholder">

</ph> 注意：网页加载时自动播放视频可能是一种 给用户带来不愉快的体验，特别是在视频包含音频时 声音，如果设备音量很大，可能会受到惊吓。自动播放功能应 只有在必要时，且因为预期对 用户。为尽量减少由于自动播放视频而导致的糟糕用户体验， 视频可自动播放的条件不同。有关 请参阅 Chrome 和 WebKit。

用户启动的播放

一般来说，只要 HTML 代码，浏览器就会立即开始下载视频文件。 解析器发现 <video> 元素。如果您有 <video> 元素，其中 用户开始播放视频，那么您可能不希望视频开始下载 直到用户与之互动

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

• 设置 preload="none" 会告知浏览器不会有任何视频内容 。
• 设置 preload="metadata" 仅提取视频元数据，例如视频的 可能还包含其他大致信息

如果您要以这种方式加载网页，最好设置 preload="none" 用户需要启动播放的视频。

<ph type="x-smartling-placeholder">

</ph> 注意：preload 属性是 提示 - 浏览器可能会选择不遵循该提示， 或将移动设备与 。

在这种情况下，您可以通过添加 poster 图片来改善用户体验。 这可以为用户提供一些背景信息，帮助他们了解视频内容。此外，如果 海报图片就是您的 LCP 元素，您可以提高 poster 图片的 使用 <link rel="preload"> 提示以及 fetchpriority="high":

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

注意：如果视频不是视频中的最大元素 那么预加载 poster 图片可能会导致您的 LCP 带宽争用（本来会分配可用带宽） 其他更关键的资源

嵌入

鉴于高效优化和提供视频内容极其复杂， 那么最好把这个问题交给专门的视频服务来 比如 YouTube 或 Vimeo这些服务可为您优化视频的传送， 嵌入来自第三方服务的视频会对 因为嵌入式视频播放器通常可以投放 例如 JavaScript

鉴于这一情况，第三方视频嵌入可能会对网页产生显著影响 性能根据 HTTP Archive 数据，YouTube 嵌入内容会阻塞主线程 显示时间超过 1.7 秒。阻塞主线程 很严重的用户体验问题，可能会影响 页面的 Interaction to Next Paint (INP)。不过，您可以采取折衷做法 不要在初始网页加载时立即加载嵌入内容，而是改为显示 为嵌入创建占位符，以替换实际的视频嵌入 当用户与其互动时触发

<ph type="x-smartling-placeholder">

</ph> 重要提示：如需了解建筑物立面，请阅读 部分 介绍延迟加载图像和 <iframe> 元素。

视频演示

知识测验

<source> 元素在 父级 <video> 元素不会确定 最终下载的是哪个视频资源。

正确。

请重试。

错误。

正确！

<video> 元素的 poster 属性 被视为 LCP 候选定位设置。

正确。

正确！

错误。

请重试。

后续内容：优化网页字体

我们介绍如何优化特定资源类型的下一个话题是字体。 优化网站字体经常被忽视，但 会对网站的整体加载速度产生显著影响， （例如 LCP 和 Cumulative Layout Shift (CLS)）。