loading="lazy" but for html5 videos

Question

I'm making a scroll-able gallery with flask that shows many<video> elements, the video files are small but it still generates a lot of http 206 requests, which are bottle-necking flask.

<img> has loading="lazy", which is very convenient.

Is there some way, javascript only or css, to implement such behavior but for <video>?

I may use preload="none", but it won't display the first video frame.

Answer 1

you may use a part of this solution :

<video preload="none" src="video.mp4" 
       autoplay="false" poster="poster.jpg"
       muted="false" loop="false">
</video>

If preload is none, the web browser don't preload the media, but i advice to replace an image with poster attribute.

Preload explanation here

autoplay explanation here

loop explanation here

poster explanation here