Lazy Loading

Jeremy Wagner
Rachel Andrew

Wie bei Bildelementen können Sie Videos auch per Lazy Loading laden. Videos werden häufig mit dem <video>-Element geladen. Allerdings ist eine alternative Methode mit <img> nur eingeschränkt implementiert. Die Anleitung zum Lazy Loading von <video> hängt jedoch vom Anwendungsfall ab. Lassen Sie uns einige Szenarien besprechen, die jeweils eine andere Lösung erfordern.

Videos ohne automatische Wiedergabe

Bei Videos, bei denen die Wiedergabe vom Nutzer eingeleitet wird (d. h. Videos, bei denen die Wiedergabe nicht automatisch durchgeführt wird), kann es sinnvoll sein, das Attribut preload im <video>-Element anzugeben:

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

Im Beispiel oben wird ein preload-Attribut mit dem Wert none verwendet, um zu verhindern, dass Browser beliebige Videodaten vorab laden. Über das Attribut poster wird dem <video>-Element ein Platzhalter zugewiesen, der den Bereich belegt, während das Video geladen wird. Der Grund dafür ist, dass das Standardverhalten beim Laden von Videos von Browser zu Browser unterschiedlich sein kann:

  • In Chrome war die preload-Standardeinstellung bisher auto. Ab Chrome 64 ist sie jetzt metadata. Dennoch kann in der Desktopversion von Chrome ein Teil des Videos mit dem Header Content-Range vorab geladen werden. Andere Chromium-basierte Browser und Firefox verhalten sich ähnlich.
  • Wie bei Chrome auf dem Desktop wird auch in den Desktopversionen von Safari 11.0 ein Bereich des Videos vorab geladen. Ab Version 11.2 werden nur die Videometadaten vorab geladen. In Safari unter iOS werden Videos nie vorab geladen.
  • Wenn der Datensparmodus aktiviert ist, wird für preload standardmäßig none verwendet.

Da das Browser-Standardverhalten in Bezug auf preload nicht in Stein gemeißelt ist, ist es wahrscheinlich am besten, explizit zu sein. In Fällen, in denen der Nutzer die Wiedergabe initiiert, ist die Verwendung von preload="none" die einfachste Möglichkeit, das Laden des Videos auf allen Plattformen zu verschieben. Das Attribut preload ist nicht die einzige Möglichkeit, das Laden von Videoinhalten zu verzögern. Unter Schnelle Wiedergabe mit Videovorabladen findest du Ideen und Einblicke in die Arbeit mit der Videowiedergabe in JavaScript.

Leider erweist es sich nicht als nützlich, wenn Sie Videos anstelle von animierten GIFs verwenden möchten. Weitere Informationen hierzu finden Sie im nächsten Abschnitt.

Videos, die als Ersatz für animierte GIFs dienen

Animierte GIFs werden zwar häufig verwendet, sind aber in vielerlei Hinsicht weniger geeignet als Videoäquivalente, insbesondere in Bezug auf die Dateigröße. Animierte GIFs können sich über mehrere Megabyte an Daten erstrecken. Videos mit ähnlicher visueller Qualität sind normalerweise viel kleiner.

Die Verwendung des <video>-Elements als Ersatz für ein animiertes GIF ist nicht so einfach wie das <img>-Element. Animierte GIFs haben drei Eigenschaften:

  1. Sie werden beim Laden automatisch abgespielt.
  2. Sie werden kontinuierlich wiederholt. Das ist jedoch nicht immer der Fall.
  3. Sie haben keinen Audiotrack.

Wenn Sie dies mit dem Element <video> erreichen, sieht das in etwa so aus:

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

Die Attribute autoplay, muted und loop sind selbsterklärend. playsinline ist für die automatische Wiedergabe unter iOS erforderlich. Jetzt habt ihr eine Funktion zum Ersetzen von Videos als GIF, die plattformübergreifend funktioniert. Aber wie geht man beim Lazy Loading vor? Ändern Sie zuerst das <video>-Markup entsprechend:

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

Außerdem wurde das Attribut poster hinzugefügt, mit dem du einen Platzhalter angeben kannst, der den Bereich des <video>-Elements einnimmt, bis das Video per Lazy Loading geladen wird. Wie bei den <img>-Beispielen für das Lazy Loading muss die Video-URL bei jedem <source>-Element im Attribut data-src abgelegt werden. Verwenden Sie dort JavaScript-Code, ähnlich wie in den Beispielen für Lazy Loading für Bilder, die auf Intersection Observer-Basis basieren:

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

Beim Lazy Loading eines <video>-Elements musst du alle untergeordneten <source>-Elemente durchlaufen und deren data-src-Attribute in src-Attribute umwandeln. Danach musst du das Laden des Videos auslösen, indem du die Methode load des Elements aufrufst. Anschließend wird die Medienwiedergabe gemäß dem Attribut autoplay automatisch gestartet.

Mit dieser Methode haben Sie eine Videolösung, die das Verhalten animierter GIFs emuliert, aber nicht dieselbe intensive Datennutzung verursacht wie animierte GIFs. Sie können diese Inhalte per Lazy Loading laden.

Lazy Loading von Bibliotheken

Die folgenden Bibliotheken können Ihnen beim Lazy Loading von Videos helfen:

  • vanilla-lazyload und lozad.js sind extrem einfache Optionen, die nur Intersection Observer verwenden. Sie sind also sehr leistungsfähig, müssen aber vorab mit Polyfills gefüllt werden, bevor sie in älteren Browsern verwendet werden können.
  • yall.js ist eine Bibliothek, die Intersection Observer verwendet und auf Event-Handler zurückgreift. Außerdem kann mithilfe eines data-poster-Attributs ein Lazy Loading für poster-Videobilder durchgeführt werden.
  • Wenn Sie eine React-spezifische Lazy Loading-Bibliothek benötigen, können Sie react-lazyload verwenden. Intersection Observer wird zwar nicht verwendet, liefert aber eine vertraute Methode zum Lazy Loading von Bildern für diejenigen, die mit der Entwicklung von Anwendungen mit React vertraut sind.

Jede dieser Lazy-Loading-Bibliotheken ist gut dokumentiert und enthält zahlreiche Markup-Muster für Ihre verschiedenen Lazy Loading-Vorfälle.