Lazy Load HTML-Videos erklärt [2024]

Aktualisiert: 4. November 2024 | vom: Martijn Assie, erstellt seit 20 Jahren Websites und Shops, dazu Experte für Linux, Wordpress, Photoshop und SEO. | EN NL

Lazy Load HTML videos

Durch Lazy Loading HTML-Videos stellen wir sicher, dass der Browser den Download erst startet, wenn jemand auf den Play-Button klickt. Dazu verwenden wir im Videoelement das Attribut "preload". Durch die Angabe von preload="none" verhindern wir, dass sowohl das Video selbst als auch seine Metadaten heruntergeladen werden. Fügen Sie Ihre Videos in den folgenden Code auf Ihrer HTML-Seite ein.

<!-- disable preloading -->
<video controls preload="none" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>

Stellen Sie sicher, dass Sie den folgenden Fehler NICHT machen. Der Code sollte kein Autoplay enthalten, da dies preload="none" rückgängig macht!

DIES IST ALSO FALSCH

<!-- video will still be preloaded -->
<video controls autoplay preload="none" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>

VIDEO THUMBNAIL GEBRUIKEN

Wenn nichts heruntergeladen wird, sieht ein Besucher je nach verwendetem Browser einen weißen oder schwarzen Bereich, beides nicht sehr attraktiv. Ich empfehle daher, ein schönes Miniaturbild in der Größe des Videos zu verwenden und den unten stehenden Code zu verwenden. Dadurch erhalten Sie das gewünschte Ergebnis.

<video controls preload="none" poster="img/cover.jpg" width="680">
    <source src="files/sample.mp4" type="video/mp4">
</video>