v147 · html · in developer trial
Lazy loading for video and audio elements
Adds the loading attribute to <video> and <audio> elements, letting browsers defer media resource loading until the element is near the viewport — the same mechanism already available for <img> and <iframe>.
chrome://flags/#enable-experimental-web-platform-features to test it. The HTML spec pull request is still open; attribute semantics may change before shipping.
at a glance
| Status in Chrome 147 | In developer trial (behind a flag) |
|---|---|
| Flag | chrome://flags/#enable-experimental-web-platform-features |
| New attribute | loading on <video> and <audio> |
| Values | eager (default) · lazy |
| Standards position | Firefox: Positive (implementation in progress) · Safari: Support (implementation in progress) |
| Spec | WHATWG HTML PR #11980 |
| Chromium bug | issues.chromium.org/issues/469111735 |
| ChromeStatus | 5200068565139456 — Lazy loading for video and audio elements |
why it exists
Since Chrome 76, <img loading="lazy"> and <iframe loading="lazy"> have let browsers skip fetching off-screen resources until the user scrolls close to them. The same pattern has never applied to <video> and <audio>, which start loading their source files as soon as the parser encounters them regardless of position on the page. Long-form pages with multiple embedded videos pay a large up-front network cost even when most users never scroll to those media elements. The loading attribute on media elements closes this gap and aligns behaviour across all embeddable resources.
the attribute
| Attribute | loading |
|---|---|
| Elements | <video>, <audio> |
loading="eager" | Default. Load the resource immediately, same as current behavior without the attribute. |
loading="lazy" | Defer resource loading until the element is within the browser's lazy-loading distance threshold from the viewport. The exact threshold is browser-defined and may vary by network conditions. |
When loading="lazy" is set:
| Network request | Deferred until the element enters the lazy-load intersection zone. |
|---|---|
preload interaction | A preload="none" hint continues to suppress loading. loading="lazy" takes effect only when the browser would otherwise begin fetching. |
| Autoplay | An element with autoplay and loading="lazy" will begin playing once loaded, which happens when it enters the threshold zone. |
JavaScript .play() | Calling .play() before the resource is loaded triggers an immediate load, overriding the lazy deferral. |
example
Basic lazy video
<video loading="lazy" controls>
<source src="feature-demo.mp4" type="video/mp4">
<source src="feature-demo.webm" type="video/webm">
</video>Lazy audio
<audio loading="lazy" controls>
<source src="podcast-episode.mp3" type="audio/mpeg">
<source src="podcast-episode.ogg" type="audio/ogg">
</audio>Combining with preload
<!-- Best practice for a long page with many videos:
lazy defers fetching; preload="metadata" limits initial load to just
duration/dimensions once the element enters the threshold zone. -->
<video loading="lazy" preload="metadata" controls>
<source src="explainer.mp4" type="video/mp4">
</video>Detecting support
const supportsLazyMedia = 'loading' in HTMLVideoElement.prototype;
if (!supportsLazyMedia) {
// Fall back to IntersectionObserver-based lazy loading
}browser support
| Browser | Support |
|---|---|
| Chrome 147 | In developer trial (behind flag) |
| Edge 147 | Tracking Chromium |
| Firefox | Positive — implementation in progress |
| Safari | Support — implementation in progress |