此页面由 Cloud Translation API 翻译。

延迟加载视频

Jeremy Wagner

Rachel Andrew

与图片元素一样，您还可以延迟加载视频。视频通常使用 <video> 元素加载（尽管替代方法 <img>已出现，但实施有限）。如何延迟加载 <video> 取决于应用场景。我们来讨论几种情况，其中每种场景都需要解决方案

对于不会自动播放的视频

对于由用户发起的播放的视频（即没有自动播放），指定 preload 属性 <video> 元素：

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

要点：视频 poster 图片符合 LCP 候选项的条件。如果您的 poster 图片是 LCP 候选图片，您应预加载该图片，并将 fetchpriority 属性值为 "high"，以便用户尽快看到该图片。

上面的示例使用值为 none 的 preload 属性来阻止浏览器任何视频数据。poster 属性为 <video> 元素提供一个占位符，以便在视频加载时占据空间。原因在于视频加载的默认行为可能因浏览器而异：

在 Chrome 中，preload 的默认设置之前是 auto，但自 Chrome 64 起，默认为 metadata。尽管如此，在桌面版 Chrome 上视频可以使用 Content-Range 标头预加载。其他基于 Chromium 的浏览器和 Firefox 的行为方式类似。
与桌面版 Chrome 一样，Safari 11.0 桌面版会预加载一定范围视频内容从 11.2 版开始，系统仅会预加载视频元数据。在 iOS 设备上的 Safari 中，预加载。
当流量节省程序模式处于已启用，preload 默认为 none。

由于浏览器在 preload 方面的默认行为并非一成不变，发布露骨内容可能是最好的选择。在这种情况下，如果用户发起使用 preload="none" 是推迟视频加载的最简单方式，所有平台。preload 属性不是延迟加载的唯一方式视频内容快速播放视频预加载可能会提供一些使用 JavaScript 播放视频的想法和见解。

很抱歉，当你想用视频代替动画 GIF，我们将在后面的课程中介绍相关内容。

用于替换动画 GIF

虽然动画 GIF 应用广泛，但就尤其是在文件大小方面GIF 动画格式可以扩展到几 MB 的数据范围视觉效果相当的视频往往也要小得多

使用 <video> 元素代替动画 GIF 并不像像 <img> 元素一样简单直接。动画 GIF 具有三个特征：

视频加载后会自动播放。
它们会不断循环（但有时 case）。
没有音轨。

使用 <video> 元素实现此目标的方式如下所示：

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

autoplay、muted 和 loop 属性均一目了然，无需另作说明。以下时间过后必须 playsinline 才能自动播放 iOS 版应用。现在，您有了可跨平台使用“视频即 GIF”替换。但如何该怎么办呢？首先，请相应地修改 <video> 标记：

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

您会看到新增了 poster 属性，用于指定一个占位符来占用 <video> 元素的空间直到视频被延迟加载与 <img> 延迟加载示例一样，将视频网址存储在每个 <source> 的 data-src 属性中元素。然后，使用与基于 Intersection Observer 的图片延迟加载示例：

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

延迟加载 <video> 元素时，您需要遍历所有子元素， <source> 元素，并将其 data-src 属性转换为 src 属性。一次您已完成其操作，则需要通过调用元素的 load 方法，之后媒体将自动开始播放根据 autoplay 属性计算得出。

通过这种方法，您可以获得模拟动画 GIF 行为的视频解决方案，但不会像动画 GIF 那样消耗大量流量，您可以延迟加载这些内容

延迟加载库

以下库可以帮助您延迟加载视频：

vanilla-lazyload 和 lozad.js 是超轻量级选项仅使用 Intersection Observer。因此，它们虽然性能出色需要先进行 polyfill 操作，然后才能在旧版浏览器上使用。
yall.js是一个使用 Intersection Observer，并回退到事件处理脚本。它还可以使用 data-poster 属性延迟加载视频 poster 图片。
如果您需要 React 专用的延迟加载库，不妨考虑 react-lazyload。虽然未使用 Intersection Observer，它提供了一种熟悉的延迟方法，为习惯于使用 React 开发应用的用户加载图片。