Lazy loading a video poster image

[smrubin]

Didn't see it mentioned in the docs, but was wondering about support for lazy loading the poster image for a video element.

I've seen it implemented in a similar lazy loading lib: malchata/yall.js#32

Thanks!

[verlok]

So the thing you’re asking is to make the poster images lazy as video. Right?

[smrubin]

I think we are talking about the same thing.

To clarify, asking for lazy loading of the poster image (via the poster attribute) for video elements.

[verlok]

Sorry about the delay. Rough times.
So something like that would be fine for you?

<video class="lazy" controls width="620"
    data-src="lazy.mp4" data-poster="lazy.jpg">
    <source type="video/mp4" data-src="lazy.mp4">
    <source type="video/ogg" data-src="lazy.ogg">
    <source type="video/avi" data-src="lazy.avi">
</video>

[verlok]

Just released in version 12.4

[smrubin]

@verlok Yeah that looks great, thanks for implementing!

[verlok]

You're welcome.

[skreutzberger]

Hi, super interesting for me, too. How would I do it using Videojs under React? Just add another property to the videoJsOptions as described here https://videojs.com/guides/react/?

Lighthouse tells me Defer offscreen images for my video poster images when they are still not visible. It seems they are identified with div.vjs-poster.

I tried adding the properties className: "lazy" and class:"lazy" but still the poster image is not lazily loaded.

Thanks for the help!