Lazy loading <video> (autoplay/GIF-like behavior)

[kalled]

Lazy loading video fails in Chrome, Firefox, Edge 79 Beta.
Works fine in IE11, Edge 15-18.

Clone the current repo 3.1.8 and npm run test -> http://localhost:8080/

Output from Firefox:

• element has no “src” attribute. Media resource load failed.
• All candidate resources failed to load. Media load paused.

I guess one workaround would be to place the video in an iframe.

At first, I was absolutely sure that this has worked before, but now I am starting to feel uncertain.

Any ideas?

[malchata]

Hi, @kalled. Thanks for raising this issue.

The problem here is that browsers have enforced policies for autoplaying video that make this use case much more difficult to code for. I've only been able to get GIF-like behavior for autoplaying videos to work in the browsers you've described, and there's no workaround that has good DX, or even good UX. In fact, I'm convinced more and more that autoplaying video of without at least some form of implicit (if not explicit) consent from users is a UX anti-pattern.

Since native lazy loading is now part of the HTML standard, I'm planning a final release for yall.js and draft guidance to persuade people to use native lazy loading. Part of that release will remove the autoplaying video-as-GIF-replacement feature. Until such a release, consider this functionality deprecated, and consider using the video element's preload attribute where appropriate.