Leniwe ładowanie filmu

Jeremy Wagner
Rachel Andrew

Podobnie jak w przypadku elementów graficznych, leniwe ładowanie wideo. Filmy są zwykle wczytywane za pomocą elementu <video> (mimo że metoda alternatywna <img> ma pojawia się z ograniczoną implementacją). Sposób leniwego ładowania <video> zależy od jego zastosowania. Omówmy kilka scenariuszy, w których każdy z nich wymaga i innego rozwiązania.

Filmy, które nie są odtwarzane automatycznie

W przypadku filmów, w których odtwarzanie zostało inicjowane przez użytkownika (tzn. takie, które nie autoodtwarzanie), określając preload w elemencie <video> może być pożądane:

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

W przykładzie powyżej użyto atrybutu preload o wartości none, aby uniemożliwić przeglądarkom przez wstępne wczytywanie jakichkolwiek danych wideo. poster nadaje elementowi <video> obiekt zastępczy, który będzie zajmować miejsce podczas wczytywania filmu. Powodem jest to, Domyślne zachowanie przy ładowaniu filmu może różnić się w zależności od przeglądarki:

  • W Chrome domyślnym ustawieniem dla preload było auto, ale od wersji 64 jest teraz domyślna wartość to metadata. Mimo to w komputerowej wersji Chrome część film może być wstępnie wczytywany za pomocą nagłówka Content-Range. Inne przeglądarki oparte na Chromium oraz Firefox działają podobnie.
  • Tak jak w przypadku Chrome na komputerze, przeglądarka Safari 11.0 na komputery będzie wstępnie wczytywała zakres w całym filmie. Od wersji 11.2 wstępnie wczytywane są tylko metadane filmu. W przeglądarce Safari na iOS filmy wstępnie załadowane.
  • Gdy włączony jest Tryb oszczędzania danych włączona, wartość domyślna preload to none.

Domyślne zachowania przeglądarki w odniesieniu do strony preload nie są stałe, wulgaryzmy to prawdopodobnie najlepszy sposób. W tym przypadku, gdy użytkownik inicjuje preload="none" to najprostszy sposób na odroczenie wczytywania filmu na wszystkich platformach. Atrybut preload nie jest jedynym sposobem opóźnienia wczytywania treści wideo. Szybkie odtwarzanie filmów Wstępne wczytywanie może zapewnić Ci kilka pomysłów i wskazówek na temat pracy z odtwarzaniem filmów w języku JavaScript.

Niestety nie jest to przydatne, gdy chcesz używać wideo zamiast animowane GIF-y, które omówimy w dalszej części tego artykułu.

Do filmów zastępujących animowany GIF

Animowane pliki GIF są powszechnie wykorzystywane, ale ich jakość nie jest tak wysoka, jak w przypadku zwłaszcza pod względem rozmiaru pliku. Animowane GIF-y mogą rozciągać się na ma zakres kilku megabajtów danych. Filmy o podobnej jakości obrazu zwykle uzyskują być znacznie mniejsza.

Używanie elementu <video> jako zamiennika animowanego GIF-a nie jest prosty jak element <img>. Animowane GIF-y mają 3 cechy:

  1. Po wczytaniu odtwarzają się automatycznie.
  2. Powtarzają się w sposób ciągły (chociaż nie zawsze jest to ).
  3. Nie mają ścieżki audio.

Osiągnięcie tego za pomocą elementu <video> wygląda mniej więcej tak:

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

Atrybuty autoplay, muted i loop nie wymagają wyjaśnień. Aby autoodtwarzanie było włączone w tych krajach: playsinline iOS Teraz masz który działa na różnych platformach. Ale jak to zrobić? o leniwym ładowaniu? Aby rozpocząć, odpowiednio zmodyfikuj znaczniki <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>

Zauważysz, że funkcja poster , który umożliwia podanie obiektu zastępczego zajmującego przestrzeń elementu <video> aż film będzie się ładować leniwie. Tak jak w przykładach z leniwym ładowaniem (<img>), przechowuj adres URL filmu w atrybucie data-src przy każdym <source> . Następnie użyj kodu JavaScript podobnego do Przykłady leniwego ładowania obrazu opartego na obserwacji intersekcji:

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);
    });
  }
});

W przypadku leniwego ładowania elementu <video> należy iterować cały element podrzędny <source> i zmień ich atrybuty data-src na atrybuty src. Jednorazowo musisz włączyć wczytywanie filmu, wywołując metodę metody load elementu, po której multimedia zaczną się automatycznie odtwarzać. zgodnie z atrybutem autoplay.

Korzystając z tej metody, otrzymujesz rozwiązanie wideo, które emuluje animowane zachowanie GIF-ów, nie wymagają przy tym tak wysokich ilości danych jak animowane GIF-y, i można je leniwie ładować.

Biblioteki z leniwym ładowaniem

Te biblioteki ułatwiają leniwe ładowanie filmów:

  • vanilla-lazyload lozad.js to superproste opcje które korzystają tylko z platformy Intersection Observer. Dzięki temu są one bardzo wydajne, Aby można było ich używać w starszych przeglądarkach, trzeba je wypełnić.
  • yall.js to biblioteka, która używa Obserwujący skrzyżowanie, korzystając z modułów obsługi zdarzeń. Może też leniwie ładować obrazy poster filmów za pomocą atrybutu data-poster.
  • Jeśli potrzebujesz biblioteki leniwego ładowania w React, możesz: react-lazyload. Choć nie używa obserwacji skrzyżowań, tylko zapewnia znaną metodę leniwego działania. wczytywania obrazów osób przyzwyczajonych do tworzenia aplikacji za pomocą React.

Każda z tych bibliotek leniwego ładowania jest dobrze udokumentowana i zawiera wiele znaczników dla różnych działań z leniwym ładowaniem.