Videos should be loaded only once they are in or near the viewport. Unfortunately videos seem to load eagerly by default. This post talks about the details, but it seems there is no way to make a <video /> element lazy load while autoplaying when visible. My attempt at hacking a workaround failed.
I think the right solution here is to create a <dwac-video /> element which includes a <noscript><video /></noscript> to be compatible when JS is disabled. When JS is enabled, the component should client-side render a <video /> tag using a lazy-loading strategy. It's a lot more effort than it should be for something like this, but probably worth the investment given the way I've been using demo videos lately.
dgp1130
commented
2 months ago
Videos should be loaded only once they are in or near the viewport. Unfortunately videos seem to load eagerly by default. This post talks about the details, but it seems there is no way to make a
<video />element lazy load while autoplaying when visible. My attempt at hacking a workaround failed.I think the right solution here is to create a
<dwac-video />element which includes a<noscript><video /></noscript>to be compatible when JS is disabled. When JS is enabled, the component should client-side render a<video />tag using a lazy-loading strategy. It's a lot more effort than it should be for something like this, but probably worth the investment given the way I've been using demo videos lately.