Add support for video and audio element lazy-loading via the loading attribute#11980
Add support for video and audio element lazy-loading via the loading attribute#11980scottjehl wants to merge 14 commits intowhatwg:mainfrom
Conversation
Specify support for the loading attribute for video using similar conventions to img and iframe, where the attribute has precedent. It has possible values of eager and lazy. When the loading attribute value is lazy, loading of any video or poster image data, as well as autoplay playback, must defer until layout is known and the video is in the viewport. This commit contains examples for how the loading attribute should take precedence over the preload, poster, and autoplay attributes. These were informed by experiments with local patch implementations to several user agents.
annevk
added
addition/proposal
|
cc @whatwg/media |
|
This direction makes sense to me, but I'm not personally able to make a commitment to implement in Chromium. @zcorpan I think you've mentioned this feature, perhaps you have feedback? |
Add detail for video element lazy loading behavior when loading state is lazy. This involves returning early to prevent poster and video data loading and defining resumption steps to resume when loading state changes to eager. Also includes notes about autoplay eligibility and precedence over the preload attribute.
Adjust language of this statement about precedence of the loading attribute over the preload attribute so that it reiterates a fact.
Remove mention as audio is not mentioned in this proposed attribute addition
…g attribute These tests support the proposal for the addition of a loading attribute on the video element, designed to enable lazy-loading for video and poster data. HTML Standard PR here whatwg/html#11980 Co-authored-by: Zach Lysobey <zlysobey@squarespace.com> Co-authored-by: Brad Frost <bfrost@squarespace.com> Co-authored-by: Credo Duarte <cduarte@squarespace.com>
|
Added and linked up a PR with web platform tests web-platform-tests/wpt#57051 small note: it says my entity is unverified above, but I think it's registered correctly now and needs a check |
zcorpan
removed
needs implementer interest
|
@scottjehl I tried to push changes to this branch but was denied. Can you enable "Allow edits from maintainers"? |
|
@zcorpan I looked into how to do that and it sounds like the option may not be available for forks made by an organization, such as this one. Any other way we can help? Perhaps if the changes are in a public fork of yours I could pull them from there? |
|
@zcorpan looked great, thanks. Merged here! |
scottjehl
changed the title
scottjehl
changed the title
|
@zcorpan is it worth adding a note in the
Or is that beyond scope? Thanks. |
…rt to the audio element as well as video
|
Latest revision includes lazy loading for HTML audio by moving the loading attribute definition to the media element interface. |
|
chromium WIP CL: https://chromium-review.googlesource.com/c/chromium/src/+/7511253 (keep in mind i am an private individual; cannot speak for google) |
Including such a note seems OK. But avoid using "may" in notes, use "will" here instead. |
|
My revisions are in based on latest comments. Thank you. |
|
From a media perspective, this lgtm. I defer to experts on the precise spec language, but the concept and mechanism all seem sound to me. |
|
@scottjehl, given #11980 (comment), feel free to check the "At least two implementers are interested (and none opposed)" box and treat that as the Chromium support. |
Done. Thanks @foolip ! |
…ttribute https://bugs.webkit.org/show_bug.cgi?id=303995 Reviewed by NOBODY (OOPS!). Implement proposed loading attribute for video and audio elements. This patch implements a proposed loading attribute for video and audio elements, enabling lazy loading of media sources and video poster images, and deferring autoplay. This change is proposed to be added to the HTML spec in the following PR: whatwg/html#11980 This patch is passing video and audio WPT tests from the following PR: web-platform-tests/wpt#57051 * Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml: * Source/WebCore/Sources.txt: * Source/WebCore/WebCore.xcodeproj/project.pbxproj: * Source/WebCore/dom/Document.cpp: (WebCore::Document::lazyLoadMediaObserver): * Source/WebCore/dom/Document.h: * Source/WebCore/html/HTMLMediaElement.cpp: (WebCore::HTMLMediaElement::didMoveToNewDocument): (WebCore::HTMLMediaElement::attributeChanged): (WebCore::HTMLMediaElement::didFinishInsertingNode): (WebCore::HTMLMediaElement::removedFromAncestor): (WebCore::HTMLMediaElement::hasLazyLoadableAttributeValue): (WebCore::HTMLMediaElement::isLazyLoadable const): (WebCore::HTMLMediaElement::loadDeferredMedia): (WebCore::HTMLMediaElement::resumeLazyLoadingIfNeeded): (WebCore::HTMLMediaElement::loading const): (WebCore::HTMLMediaElement::setLoading): (WebCore::HTMLMediaElement::play): (WebCore::HTMLMediaElement::sourceWasAdded): (WebCore::HTMLMediaElement::setShouldDelayLoadEvent): * Source/WebCore/html/HTMLMediaElement.h: * Source/WebCore/html/HTMLMediaElement.idl: * Source/WebCore/html/HTMLVideoElement.cpp: (WebCore::HTMLVideoElement::rendererIsNeeded): (WebCore::HTMLVideoElement::supportsFullscreen const): (WebCore::HTMLVideoElement::hasAvailableVideoFrame const): (WebCore::HTMLVideoElement::webkitEnterFullscreen): (WebCore::HTMLVideoElement::loadDeferredMedia): * Source/WebCore/html/HTMLVideoElement.h: * Source/WebCore/html/LazyLoadMediaObserver.cpp: Added. (WebCore::LazyLoadMediaObserver::observe): (WebCore::LazyLoadMediaObserver::unobserve): (WebCore::LazyLoadMediaObserver::intersectionObserver): (WebCore::LazyLoadMediaObserver::isObserved const): * Source/WebCore/html/LazyLoadMediaObserver.h: Added. * Source/WebCore/html/parser/HTMLParserOptions.cpp: * Source/WebCore/html/parser/HTMLPreloadScanner.cpp: (WebCore::TokenPreloadScanner::StartTagScanner::processAttribute): * Source/WebCore/html/shadow/DataListButtonElement.cpp: * Source/WebCore/html/shadow/SpinButtonElement.cpp: * Source/WebCore/loader/ImageLoader.cpp: (WebCore::ImageLoader::updateFromElement): (WebCore::ImageLoader::didUpdateCachedImage): (WebCore::ImageLoader::notifyFinished): (WebCore::ImageLoader::updatedHasPendingEvent): (WebCore::ImageLoader::decode):
9 participants
Specify support for the loading attribute for the video element and audio element using similar conventions to img and iframe, where the attribute already has precedent. Loading has possible values of eager and lazy. When a media element's loading attribute value is lazy, loading of any video or poster image data, as well as autoplay playback, will defer until layout is known and the video is in the viewport.
Note Jan 22, 2026: Broadening PR to include Audio Element support.
Resolves #10376
(See WHATWG Working Mode: Changes for more details.)
/acknowledgements.html ( diff )
/indices.html ( diff )
/media.html ( diff )
/urls-and-fetching.html ( diff )