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 bisherauto
. Ab Chrome 64 ist sie jetztmetadata
. Dennoch kann in der Desktopversion von Chrome ein Teil des Videos mit dem HeaderContent-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äßignone
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:
- Sie werden beim Laden automatisch abgespielt.
- Sie werden kontinuierlich wiederholt. Das ist jedoch nicht immer der Fall.
- 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ürposter
-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.