Felix NiklasFeb 27
Johannes Odland

Don't you wish you could use `loading=lazy` on the `<video>` element?

@scottjehl is at it again, and if we're lucky this will be possible some time in the future.

https://github.com/WebKit/standards-positions/issues/586#issuecomment-3960128741

Add support for video and audio element lazy-loading via the loading attribute · Issue #586 · WebKit/standards-positions

WebKittens @annevk Title of the proposal HTML Video Element Loading Attribute URL to the spec https://whatpr.org/html/11980/media.html#the-video-element URL to the spec's repository whatwg/html#119...

GitHub
Feb 27 at 9:42amWeb
Show threadbigandyFeb 27

@johannes @scottjehl looks like its in Chrome Canary

https://issues.chromium.org/issues/469111735 with the experimental platform features flag enabled.

https://codepen.io/bigandy/pen/qEaddwK

Chromium

Show threadJohannes OdlandFeb 27

@bigandy @scottjehl 🎉

Now all tat is missing is responsive poster images ✨

Show threadScott JehlMar 4
@johannes @bigandy I might take a look at that one next. I like the idea of this one still I think (img or poster) https://github.com/whatwg/html/issues/10378
HTML Video: Allow a child Picture Element to Control the Video Poster Image · Issue #10378 · whatwg/html

What is the issue with the HTML Standard? The video element currently offers a single poster attribute, which allows us to load one poster image source. This is limiting when attempting to deliver ...

GitHub
Show threadJohannes OdlandMar 4

@scottjehl @bigandy I'm happy with any solution :)

Wonder if we'll have to repeat media, sizes ++ across sources tho

```
<video loading=lazy>
<picture>
<source
media="..."
srcset="..."
sizes="auto, 600px">
<img
alt="..."
srcset="..."
sizes="auto, 100vw"
loading=lazy?
>
</picture>
<source
media="..."
srcset="..."
sizes="auto, 600px">
<source
srcset="..."
sizes="auto, 100vw">
</video>
```

Show threadJohannes OdlandMar 4

@scottjehl @bigandy That is if we get srcset on video sources though:

https://github.com/whatwg/html/issues/10379

Show threadJohannes OdlandMar 4

@scottjehl @bigandy

VS

```
<video loading=lazy>
<source
media="..."
srcset="..."
postersrcset="..."
sizes="auto, 600px">
<source
srcset="..."
postersrcset="..."
sizes="auto, 100vw">
</video>
```