Normalerweise werden Videos mit dem Video- Tag geladen (obwohl eine alternative Methode mit img erschienen ist, sind ihre Funktionen jedoch begrenzt). Die Art und Weise, wie das verzögerte Laden von Videos implementiert wird, hängt vom Anwendungsfall ab. Lassen Sie uns mehrere Szenarien diskutieren, die jeweils eine andere Lösung erfordern.
Für Videos ohne automatische Wiedergabe
Für vom Benutzer initiierte Videos (d. H. Videos, die nicht automatisch abgespielt werden) müssen Sie das entsprechende Attribut im Video- Tag angeben :
<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 obigen Beispiel wird das Attribut " Preload" mit dem Wert " none" verwendet , sodass Browser keine Videodaten herunterladen können. Das Posterattribut legt ein Vorschaubild für das Video fest, das das Video auf der Seite ersetzt, bis es geladen wird. Die Notwendigkeit einer Vorschau ist darauf zurückzuführen, dass das Laden von Videos in verschiedenen Browsern unterschiedlich ist:
- In Chrome war der Standardwert für das Preload- Attribut auto , aber seit Version 64 ist der Standardwert Metadaten . Trotzdem kann auf Desktop-Chrome ein Teil des Videos mithilfe des Content-Range-Headers vorinstalliert werden. Firefox, Edge und Internet Explorer 11 verhalten sich ähnlich.
- Chrome, Safari 11.0 . 11.2, , Safari iOS .
- , preload none.
Da sich das Standardverhalten hinsichtlich des automatischen Ladens von Browser zu Browser unterscheidet, ist es wahrscheinlich am besten, dieses Verhalten explizit festzulegen. In Fällen, in denen der Benutzer die Wiedergabe selbst initiiert, ist die Verwendung von Preload = "none" der einfachste Weg, um das Laden von Videos auf allen Plattformen zu verzögern. Das Preload-Attribut ist nicht die einzige Möglichkeit, das Laden von Videoinhalten zu verzögern. Schnelle Wiedergabe mit Video Preload kann Ihnen einige Ideen und Einblicke in die Arbeit mit der Videowiedergabe in JavaScript geben.
Leider ist dies nutzlos, wenn Sie Videos anstelle von GIFs verwenden möchten. Wir werden weiter unten darauf eingehen.
Für ein Video, das als Ersatz für ein animiertes GIF dient
Obwohl animierte GIFs weit verbreitet sind, bleiben sie in vielerlei Hinsicht hinter den Videoäquivalenten zurück, insbesondere in Bezug auf die Dateigröße. Animierte GIFs können mehrere Megabyte Daten aufnehmen. Videos mit ähnlicher visueller Qualität sind normalerweise viel kleiner.
Die Verwendung des Videoelements als Ersatz für ein animiertes GIF ist nicht einfach. Animierte GIFs haben drei Eigenschaften:
- Sie werden nach dem Herunterladen automatisch abgespielt.
- Sie werden kontinuierlich wiederholt ( obwohl dies nicht immer der Fall ist ).
- Sie haben keine Audiospur.
Dies mit einem Video- Tag zu erreichen, sieht ungefähr 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. playinline ist für die automatische Wiedergabe unter iOS erforderlich . Sie haben jetzt einen verwendbaren Ersatz für Videoanimationen. Aber wie fügt man Videos ein verzögertes Laden hinzu? Chrome hat kein Problem mit dem Laden von Videos mit verzögertem Laden , aber Sie können nicht auf alle Browser zählen, um dieses optimierte Verhalten bereitzustellen. Abhängig von Ihrer Zielgruppe und den Anwendungsanforderungen müssen Sie die Angelegenheit möglicherweise selbst in die Hand nehmen. Ändern wir zunächst die Videoverbindung:
<video 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>
Möglicherweise bemerken Sie das Hinzufügen des Posterattributs , mit dem Sie ein Vorschaubild auf der Seite anstelle des Video- Tags angeben können, bis das Video verzögert geladen wird. Die Video-URL wird in das data-src- Attribut jedes Quellelements eingefügt .
Wir verwenden JavaScript, um das "verzögerte" Laden mit IntersectionObserver zu organisieren.
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);
});
}
});
Wir iterieren über alle untergeordneten Elemente der Quelle und konvertieren ihre data-src- Attribute in src- Attribute . Sobald Sie dies getan haben, müssen Sie mit dem Laden des Videos beginnen, indem Sie die Lademethode aufrufen. Danach beginnt die Wiedergabe des Mediums automatisch gemäß dem Autoplay- Attribut .
Mit dieser Methode erhalten Sie eine vorgefertigte Videolösung, die das Verhalten eines animierten GIF nachahmt, jedoch nicht dieselbe datenintensive Verwendung erfordert, und Sie können diesen Inhalt träge laden.
Lazy Loading Libraries
Die folgenden Bibliotheken können Ihnen beim langsamen Laden von Videos helfen:
- lozad.js ist eine ultraleichte Version, die nur Intersection Observer verwendet. Daher ist es sehr effizient, muss jedoch mit Polyfills ergänzt werden, bevor Sie es in älteren Browsern verwenden können.
- yall.js ist eine Bibliothek, die Intersection Observer verwendet und auf Ereignishandler zugreift. Es ist kompatibel mit IE11 und den wichtigsten Browsern.
- Wenn Sie eine Lazyload- Bibliothek für React benötigen, können Sie React -Lazyload in Betracht ziehen . Diese Bibliothek verwendet keinen Intersection Observer, bietet jedoch eine Möglichkeit zum verzögerten Laden von Bildern, mit denen React-Entwickler vertraut sind.
Jede dieser Bibliotheken ist dokumentiert und enthält viele Markup-Vorlagen für verschiedene verzögerte Ladeaufgaben.