Videókhoz lazy loading

Videókhoz lazy loading
2021-09-01T23:37:49+02:00
2021-09-07T14:53:31+02:00
2022-10-15T21:21:45+02:00
*deleted_23419333
Sziasztok!

Képeknél az alábbi lazy loading technikát alkalmazom:

<img loading="lazy" src="" />

Tudom, hogy ezt sok böngésző nem támogatja, de ezzel most nem akarok foglalkozni.

A honlapom tele van trailer-ekkel (lentebb ez a HTML bővebben):

<div class="video_thumb" id="post1"><video width="160" height="90" autoplay muted loop><source src="https://*/1.mp4" type="video/mp4"></video></div> <div class="video_thumb" id="post2"><video width="160" height="90" autoplay muted loop><source src="https://*/2.mp4" type="video/mp4"></video></div> <div class="video_thumb" id="post3"><video width="160" height="90" autoplay muted loop><source src="https://*/3.mp4" type="video/mp4"></video></div>

CSS segítségével elrejtem ezeket az elemeket:

.video_thumb { display: none }

... és csak onmouseover vagy ontouchmove esetén jelenítem meg őket:

<html> <head> <script> var touched_post_id = null; function videoThumb( post_id, play ) { video = document . getElementById( 'post' + post_id ); if( play == 'play' ) { if( touched_post_id !== null ) { touched_video = document . getElementById( 'post' + touched_post_id ); touched_video . style . display = 'none'; } else {} touched_post_id = post_id; video . style . display = 'block'; } else { video . style . display = 'none'; } } </script> </head> <body></body> </html>

Jól gondolom, hogy hiába rejtem el ezeket a .video_thumb div-eket, attól még az oldal betöltődésekor betöltődnek az elrejtett .video_thumb div-ekben levő videók, ami jelentősen lassítja az oldal betöltődését?

Azt is jól gondolom, hogy ez a fenti JavaScript megoldás se a legjobb?

Ki hogyan oldaná meg ezt a feladatot?

A lényeg: thumbnail képeket akarok megjeleníteni, de ha valaki rámegy ezekre a képekre (egér kurzorral vagy telefonon az ujjával), akkor szeretnék bejátszani egy trailer-t a képek helyett. Szeretnék egy jól, logikusan felépített honlapot.

A fentebb látható HTML teljes változata:

<div id="videos"> <div class="video"> <div class="thumbnail"> <a href="https://*/603" ontouchmove="videoThumb( 603, 'play' )" onmouseover="videoThumb( 603, 'play' )" onmouseout="videoThumb( 603, 'stop' )"> <img loading="lazy" src="https://*/603.jpg" /> <div class="video_thumb" id="post603"> <video width="160" height="90" autoplay muted loop> <source src="https://*/603.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> </div>

Előre is köszönöm a hozzászólásokat. Minden kritikát, észrevételt, javaslatot stb. nagy örömmel fogadok.
Mutasd a teljes hozzászólást!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .video { display: inline-block; } </style> </head> <body> <div id="videos"> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> </div> <script> let videoPlay = (className) => { let classes = document.querySelectorAll(className); classes.forEach((item) => { item.addEventListener('mouseover', () => { item.play(); }); item.addEventListener('mouseout', () => { item.pause(); }); }) }; videoPlay("video"); </script> </body> </html>
Mutasd a teljes hozzászólást!

  • Közben találtam egy ilyet: HTML preload Attribute

    The author thinks that the browser should NOT load the video when the page loads

    A <video preload="none"> pontosan azt csinálná, hogy nem tölti be a videókat az oldal betöltődésekor?

    Ez jó lenne, viszont ebből születik egy újabb kérdés.

    Ha ontouchmove vagy onmouseover eseményre megjelenítem a lejátszót, akkor hogyan lehetne azt megoldani, hogy előbb töltődjön be a teljes trailer/videó, majd csak aztán kezdje el lejátszani?

    Ezek nem teljes értékű trailer-ek, hanem a trailer-ekből kivágott rövid jelenetek, tehát kevesebb mint egy percesek és kisméretűek. Szóval arra sincs szükség, hogy a videó betöltődéséig megjelenjen egy animáció vagy bármi pörgő, forgó elem.
    Mutasd a teljes hozzászólást!
  • Szia, ennel reszletesebben leirni nehez lenne:web.dev
    Talalsz benne a kezdokepre is leirast.ha a betoltodesben nem vagy biztos, f12 network -ban ellenorizheted
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .video { display: inline-block; } </style> </head> <body> <div id="videos"> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> <div class="video"> <div class="thumbnail"> <a href="x.html"> <div class="video_thumb" id="post603"> <video width="160" height="90" preload="none" poster="img/1.jpg" muted="muted"> <source src="v.mp4" type="video/mp4"> </video> </div> </a> </div> <div class="title"> <a href="https://*/603">603</a> </div> </div> </div> <script> let videoPlay = (className) => { let classes = document.querySelectorAll(className); classes.forEach((item) => { item.addEventListener('mouseover', () => { item.play(); }); item.addEventListener('mouseout', () => { item.pause(); }); }) }; videoPlay("video"); </script> </body> </html>
    Mutasd a teljes hozzászólást!
  • Nagyon szuper! Az érintőkijelzős készülékeken az onmouseover mellé kellene az ontouchmove is, de ezzel már ki is egészítettem:

    item.addEventListener('mouseover', () => { item.play(); }); item.addEventListener('touchstart', () => { item.play(); });

    Az addEventListener-be a HTML ontouchmove-a helyett touchmove kellene, de talán még jobb a kódban is szereplő touchstart.

    Szóval így már eszközfüggetlenül elindul a lejátszás, az egér kurzorral is meg érintéssel is.

    A következő probléma, hogy a mouseout eseményre az item.pause() csak megállítja a videót, de nem jelenik meg újra a poster kép. Erre az eseményre azt szeretném ha megjelenne a poster, illetve a videó elölről kezdődne, de már ez is megoldva:

    item.addEventListener('mouseout', () => { item.pause(); item.currentTime = 0; item.load(); });

    Ami viszont még nincs megoldva:

    Az item.addEventListener-nél a mouseout mellé kellene a touchend vagy a touchcancel, de ezek azért nem jók mert ezek csak akkor állítják meg a videót ha az ujjamat leveszem a kijelzőről, vagyis folyamatosan rajta kéne, hogy legyen az ujjam a videón ahhoz, hogy menjen a trailer videó. Szóval, amit szeretnék: ha az ujjamat leveszem egy trailer-ről, akkor az addig játszódjon le továbbra is, folyamatosan, amíg másik videó trailer-ére nem rakom az ujjam.
    Mutasd a teljes hozzászólást!
  • <script> let videoPlay = (className) => { let classes = document.querySelectorAll(className); classes.forEach((item, index) => { item.addEventListener('mouseover', () => { item.play(); classes.forEach((item1, index1) => { if (index != index1) { item1.load(); } }); }); }); } videoPlay("video"); </script>
    Biztosan van szebb megoldás is, de működik, az eseményeket majd átírod
    Mutasd a teljes hozzászólást!
  • Tökéletes. Köszönöm.

    item.addEventListener('mouseover', () => { item.play(); classes.forEach((item1, index1) => { if (index != index1) { item1.load(); } }); }); item.addEventListener('touchstart', () => { item.play(); classes.forEach((item1, index1) => { if (index != index1) { item1.load(); } }); }); item.addEventListener('mouseout', () => { item.pause(); item.currentTime = 0; item.load(); });
    Mutasd a teljes hozzászólást!
  • nincs mit
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd