Video loading=lazy attribute support

[scottjehl]

What is the issue with the HTML Standard?

If the video element offered loading="lazy" support, that attribute could be used to determine how other desirable video features behave, such as when autoplay starts playing, and when its poster image and video file data are fetched.

For example, loading=lazy combined with the autoplay attribute could cause a video to delay its poster image loading, its data fetching (other than metadata perhaps?), and its autoplay behavior until the video element is in (near) the viewport. Per my understanding, lazy autoplay is currently doable with JavaScript and it'd be great to offer a declarative HTML alternative.

Could <video loading="lazy" ..></video> be one already-familiar way to offer a set of lazy behaviors for video?

[aarontgrogg]

Huge fan of this, as it becomes more standard like img.

Had this convo via Slack with @tunetheweb and others.

Seems like logic could make multiple things happen as you describe:

• preload="none" loading="lazy" poster="/image.jpg" would do nothing until the user scrolls near, then would load the poster and begin downloading the video; without autoplay the user would need to initiate playing.
• preload="none" loading="lazy" autoplay poster="/image.jpg" would do nothing until the user scrolls near, then would load the poster and begin downloading the video; once the video is downloaded, begin playing.
• preload="metadata" loading="lazy" autoplay poster="/image.jpg" would only download metadata nothing until the user scrolls near, then would load the poster and begin downloading the video; once the video is downloaded, begin playing.
• etc.

It bugs me that JS is required to autoplay lazy loaded videos... :-/

[argyleink]

/sub and +1

Went hunting for why video can't lazy load and found this. On my site nerdy.dev there is a lot of savings potential. I use preload="none" right now, which saves a lot already, but all the poster images still download, even the ones way at the bottom. Would like to save that bandwidth and not use JS for this type of optimization.

[annevk]

cc @whatwg/media

[zcorpan]

My previous comment about options: #6636 (comment)

I suppose a reason to want lazy-loading for videos (over preload="none" and some way to opt in to lazy-loading for the poster image) is when you don't have a poster image. Or you want some video data to be loaded (when scrolled into view) so that playback starts sooner when requested.

[aarontgrogg]

@argyleink : The closest thing to ideal that I have found (I did not create this, but cannot find who I pilfered from) is something like this for above-the-fold videos with "posters"...

<section class="video-wrapper">
    <picture>
        <source srcset="poster-image-mobile.png" height="1080" width="1920" media="(max-width: 1023px)">
        <source srcset="poster-image-desktop.png" height="1920" width="1080" media="(min-width: 1024px)">
        <img src="" loading="eager" alt="Descriptive text">
    </picture>
    <video preload="auto" autoplay muted loop playsinline controlslist="nodownload">
        <source src="video-mobile.mp4" height="1080" width="1920" type="video/mp4" media="(max-width: 1023px)">
        <source src="video-desktop.mp4" height="1920" width="1080" type="video/mp4" media="(min-width: 1024px)">
    </video>
</section>

And can then add:

<link rel="preload" fetchpriority="high" as="image" href="poster-image-mobile.png" media="(max-width: 1023px)">
<link rel="preload" fetchpriority="high" as="image" href="poster-image-desktop.png" media="(min-width: 1024px)">

And position the video over the picture with:

<style>
    img, video {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    .video-wrapper {
        display: grid;
        grid-template: "container";
        place-items: center;
        place-content: center;
    }
    .video-wrapper > picture,
    .video-wrapper > video {
        grid-area: container;
    }
    .video-wrapper img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
</style>

For below-the-fold:

• change the img loading to "lazy",
• change the video preload to "none",
• remove the video autoplay and
• remove the "preload" links.

Bit verbose, but gets the job done:

• Above-the-fold: Correct image preloads based on media, so is visible fast, as video downloads, just starts playing over top. If the poster image is the first frame of the video, it looks like it is kind of "stuck', then just starts playing, but you see something soon.
• Below-the-fold: Correct image lazy loads based on media, so is visible when the user scrolls to it, the video downloads if the user click it, and just starts playing over top.

Massive kudos to whoever initially came up with this.