本頁面由 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 電腦版的 Safari 會預先載入儲存格範圍而自 11.2 版起，系統只會預先載入影片中繼資料。iOS 版 Safari 一律不會顯示影片預先載入的內容。
當數據節省模式開啟時已啟用，preload 預設為 none。

由於與 preload 相關的瀏覽器預設行為並非初始設定，明確來說就是最好的處置方式若是使用者啟動播放時，若要延遲在 YouTube 上載入影片，使用 preload="none" 是最簡單的方法和所有平台。preload 屬性不是延後載入的唯一方法同理，快速播放影片預先載入 一些關於在 JavaScript 中播放影片的建議和見解。

不過，如果您想利用影片取代以下介紹的 GIF 動畫。

將影片當做 GIF 替換動畫

雖然動畫 GIF 廣受大眾歡迎，但效果不如特別是檔案大小GIF 動畫可以延伸至有多少 MB 的資料影像品質差不多的影片圖像的規模現在也小很多

使用 <video> 元素取代動畫 GIF 的效果並不是如同 <img> 元素動畫 GIF 具有三大特性：

影片載入後會自動播放。
而且會不斷循環 (不過，不一定每次都會案件)。
沒有音軌。

透過 <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。因此效能非常出色必須先以多元方式填入廣告，才能在舊版瀏覽器中使用。
yall.js 這個程式庫會使用 Intersection Observer 並改回使用事件處理常式。也可以使用 data-poster 屬性延遲載入影片 poster 圖片。
如果需要 React 專屬的延遲載入程式庫，建議 react-lazyload。期間並未使用 Intersection Observer，但「確實」提供了熟悉的延遲方法為習慣使用 React 開發應用程式的人載入映像檔。

每個延遲載入程式庫都有充分記錄，內含大量標記定義各種延遲載入項目