Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy loading a video poster image #365

Closed
smrubin opened this issue Aug 20, 2019 · 7 comments
Closed

Lazy loading a video poster image #365

smrubin opened this issue Aug 20, 2019 · 7 comments

Comments

@smrubin
Copy link

smrubin commented Aug 20, 2019

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
Copy link
Owner

verlok commented Oct 22, 2019

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

@smrubin
Copy link
Author

smrubin commented Oct 22, 2019

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
Copy link
Owner

verlok commented Nov 20, 2019

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
Copy link
Owner

verlok commented Nov 20, 2019

Just released in version 12.4

@verlok verlok closed this as completed Nov 20, 2019
@smrubin
Copy link
Author

smrubin commented Nov 21, 2019

@verlok Yeah that looks great, thanks for implementing!

@verlok
Copy link
Owner

verlok commented Nov 22, 2019

You're welcome.

@skreutzberger
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants