Lazy Loading

Jeremy Wagner

Rachel Andrew

Wie bei Bildelementen können Sie Videos auch per Lazy Loading laden. Videos werden in der Regel mit dem Element <video> geladen, auch wenn eine alternative Methode mit <img> mit eingeschränkter Implementierung eingeführt wurde. Wie das Lazy Loading von <video> jedoch funktioniert, hängt vom Anwendungsfall ab. Lassen Sie uns einige Szenarien besprechen, die jeweils eine andere Lösung erfordern.

Videos, die nicht automatisch wiedergegeben werden

Bei Videos, bei denen die Wiedergabe vom Nutzer initiiert wird (d. h. Videos, die nicht automatisch wiedergegeben werden), empfiehlt es sich unter Umständen, das Attribut preload für das Element <video> 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 alle Videodaten vorab laden. Durch das Attribut poster erhält das Element <video> einen Platzhalter, der den Raum einnimmt, während das Video geladen wird. Der Grund dafür ist, dass das Standardverhalten zum Laden von Videos von Browser zu Browser variieren kann:

• In Chrome war der Standardwert für preload früher auto, aber ab Chrome 64 wird er jetzt standardmäßig auf metadata gesetzt. In der Desktopversion von Chrome kann jedoch ein Teil des Videos über den Content-Range-Header vorab geladen werden. Andere Chromium-basierte Browser und Firefox verhalten sich ähnlich.
• Wie bei der Desktopversion von Chrome wird bei der Desktopversion von Safari 11.0 ein Teil des Videos vorab geladen. Ab Version 11.2 werden nur die Videometadaten vorab geladen. In Safari auf iOS-Geräten werden Videos nicht vorab geladen.
• Wenn der Datensparmodus aktiviert ist, wird für preload standardmäßig none verwendet.

Da das Standardverhalten des Browsers in Bezug auf preload nicht in Stein gemeißelt ist, sollten Sie möglichst explizit sein. In diesem Fall, in dem der Nutzer die Wiedergabe initiiert, ist die Verwendung von preload="none" die einfachste Möglichkeit, das Laden des Videos auf allen Plattformen zu verzögern. Das Attribut preload ist nicht die einzige Möglichkeit, das Laden von Videoinhalten zu verzögern. Unter Schnelle Wiedergabe mit Videovorabladefunktion findest du möglicherweise Anregungen und Einblicke in die Verwendung der Videowiedergabe in JavaScript.

Leider erweist sich dies nicht als nützlich, wenn Sie Videos anstelle animierter GIFs verwenden möchten, die im Folgenden beschrieben werden.

Für Videos, die als animiertes GIF ersetzt werden

Auch wenn animierte GIFs weit verbreitet sind, sind sie in vielerlei Hinsicht schlechter als Videoäquivalente, insbesondere in Bezug auf die Dateigröße. Animierte GIFs können sich über mehrere Megabyte an Daten erstrecken. Videos ähnlicher visueller Qualität sind in der Regel 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 nach dem Laden automatisch abgespielt.
2. Sie wiederholen sich kontinuierlich (was jedoch nicht immer der Fall ist).
3. Sie haben keinen Audiotrack.

Mit dem Element <video> erreichen Sie dies in etwa so:

<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 hast du einen Ersatz für Videos als GIF, der plattformübergreifend funktioniert. Aber wie funktioniert das Lazy Loading? Ändere zunächst dein <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>

Sie werden feststellen, dass das Attribut poster hinzugefügt wurde. Damit können Sie einen Platzhalter angeben, der den Bereich des <video>-Elements einnimmt, bis das Video Lazy Loading ist. Wie bei den <img>-Beispielen für Lazy Loading verstecken Sie die Video-URL in jedem <source>-Element im data-src-Attribut. Verwenden Sie dort JavaScript-Code, ähnlich wie in den Beispielen für Lazy Loading von Bildern auf Intersection Observer-Basis:

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 müssen Sie alle untergeordneten <source>-Elemente durchlaufen und deren data-src-Attribute in src-Attribute umwandeln. Anschließend müssen Sie das Laden des Videos auslösen, indem Sie die Methode load des Elements aufrufen. Anschließend werden die Medien automatisch gemäß dem autoplay-Attribut abgespielt.

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

Lazy Loading von Bibliotheken

Die folgenden Bibliotheken können für das Lazy Loading von Videos geeignet sein:

• vanilla-lazyload und lozad.js sind extrem schlanke Optionen, die nur Intersection Observer verwenden. Daher bieten sie eine hohe Leistung, müssen jedoch mit Polypen 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. Mit einem data-poster-Attribut können auch poster-Videos per Lazy Loading geladen werden.
• Wenn Sie eine React-spezifische Lazy Loading-Bibliothek benötigen, wäre React-Lazyload vielleicht besser für Sie geeignet. Intersection Observer kommt hier zwar nicht zum Einsatz, bietet aber eine bekannte 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 umfassend dokumentiert und bietet zahlreiche Markup-Muster für deine verschiedenen Lazy Loading-Unterlagen.