Lazy Load HTML videos uitgelegd [2024] 💥
Door middel van Lazy Loading HTML videos zorgen we ervoor dat de browser niet begint te downloaden totdat iemand op de playknop klikt. Hiervoor gaan we het attribuut "preload" gebruiken in het video-element. Door preload="none" op te geven, voorkomen we dat zowel de video zelf als zijn metadata gedownload wordt. Zet uw videos in onderstaande code op uw html-pagina.
<!-- disable preloading -->
<video controls preload="none" width="680">
<source src="files/sample.mp4" type="video/mp4">
</video>Advertisement
Zorg dat u NIET onderstaande fout maakt. Er mag geen autoplay in de code staan want dat maakt preload="none" weer ongedaan!
DIT IS DUS FOUT
<!-- video will still be preloaded -->
<video controls autoplay preload="none" width="680">
<source src="files/sample.mp4" type="video/mp4">
</video>VIDEO THUMBNAIL GEBRUIKEN
Als er niets gedownload wordt ziet een bezoeker afhankelijk van de browser die hij gebruikt een wit of een zwart vlak, beide niet erg aantrekkelijk. I raad u daarom aan om een mooie thumbnail afbeelding in de grootte van de video te gebruiken en daarbij onderstaande code te gebruiken. Dit geeft het resultaat waar u naar op zoek was.
<video controls preload="none" poster="img/cover.jpg" width="680">
<source src="files/sample.mp4" type="video/mp4">
</video>Advertisement