diff --git a/source b/source index a65eae126d1..2755077828a 100644 --- a/source +++ b/source @@ -8010,11 +8010,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute Brief description - lazy + lazy Lazy Used to defer fetching a resource until some conditions are met. - eager + eager Eager Used to fetch a resource immediately; the default state. @@ -8053,10 +8053,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute -

Each img and iframe element has associated lazy load resumption +

Each img, video, and iframe element has associated lazy load resumption steps, initially null.

-

For img and iframe elements that For img, video, and iframe elements that will lazy load, these steps are run from the lazy load intersection observer's callback or when their lazy loading attribute is set to the Eager state. This causes the element to @@ -36349,6 +36349,7 @@ interface HTMLObjectElement : HTMLElement {

loop
muted
controls
+
loading
width
height
HTMLVideoElement : HTMLMediaElement readonly attribute unsigned long videoHeight; [CEReactions, ReflectURL] attribute USVString poster; [CEReactions, Reflect] attribute boolean playsInline; + [CEReactions] attribute DOMString loading; + };
Uses HTMLVideoElement.
@@ -36436,7 +36439,11 @@ interface HTMLVideoElement : HTMLMediaElement data-x="concept-request-destination">destination is "image", initiator type is "video", credentials mode is "include", and whose use-URL-credentials flag is set. + data-x="">include", and whose use-URL-credentials flag is set.

+ +

  • If the will lazy load element steps given the video return true, + then return.

    • +

  • Fetch request. This must delay the load event of the element's node document.

    • @@ -36467,6 +36474,101 @@ interface HTMLVideoElement : HTMLMediaElement agents have chosen to play all videos inline by default, and in such user agents the playsinline attribute has no effect.

    +

    The loading attribute is a lazy + loading attribute. Its purpose is to indicate the policy for loading videos that are + outside the viewport.

    + +
    +

    When the loading attribute's state is changed to the + Eager state, the user agent must run these + steps:

    + +
      +

    1. Let resumptionSteps be the video element's lazy load + resumption steps.

      2. + +

    2. If resumptionSteps is null, then return.

      3. + +

    3. Set the video's lazy load resumption steps to null.

      4. + +

    4. Invoke resumptionSteps.

      5. +
    +
    + +
    +

    The loading + IDL attribute must reflect the loading content + attribute, limited to only known values.

    +
    + +

    When the loading attribute is in the + Lazy state, it takes precedence over the + preload attribute by deferring data fetching.

    + +

    If the autoplay attribute is present and the loading + attribute is in the Lazy state, the user agent must + also defer starting playback (and any associated network requests autoplay may introduce) until the element's lazy load + resumption steps are invoked.

    + +

    If the poster attribute is present and the loading + attribute is in the Lazy state, the user agent must + defer loading the poster image source data until the element's lazy load + resumption steps are invoked.

    + +
    + 
    <video src="1.mp4" poster="1.jpg" type="video/mp4">
+<video src="2.mp4" type="video/mp4" loading="eager">
+<video src="3.mp4" type="video/mp4" loading="lazy">
+<video src="4.mp4" type="video/mp4" loading="lazy" autoplay>
+<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
+<video src="5.mp4" type="video/mp4">
+<video src="6.mp4" type="video/mp4" loading="lazy">
+<video src="7.mp4" type="video/mp4" autoplay loading="lazy">
+<video src="8.mp4" type="video/mp4" poster="8.jpg" loading="lazy">
+<video src="9.mp4" type="video/mp4" preload="none" poster="9.jpg" loading="lazy">
+<video src="10.mp4" type="video/mp4" preload="metadata" loading="lazy">
    + +

    In the example above, the videos load as follows:

    + +
    +
    1.mp4
    +

    The video and poster image load eagerly and delay the window's load event.

    + +
    2.mp4, + 5.mp4
    +

    The videos load eagerly and delay the window's load event.

    + +
    3.mp4
    +

    The video loads when layout is known, due to being in the viewport, however it does not + delay the window's load event.

    + +
    4.mp4
    +

    The video loads and autoplay playback begins when layout is known, due to being in the viewport, however it does not + delay the window's load event.

    + +
    6.mp4
    +

    The video loads only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    7.mp4
    +

    The video loads and autoplay playback begins only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    8.mp4
    +

    The video and poster image load only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    9.mp4
    +

    The video does not load until played. The poster image loads only once scrolled into the viewport, and does not delay the window's + load event.

    + +
    10.mp4
    +

    The video's metadata loads only once scrolled into the viewport, and does not delay the window's + load event.

    +
    +
    + +
    @@ -37826,7 +37928,9 @@ interface MediaError {

  • Set the element's show poster flag to true.

    • -

  • Set the media element's delaying-the-load-event flag to true +

  • If the media element is an audio element, or if the media element is a video element and its lazy loading + attribute is in the Eager state or + scripting is disabled, set the media element's delaying-the-load-event flag to delay load event (this delays the load event).

  • Await a stable state, allowing the MediaError { object is as follows:

      +
    1. +

      If the media element is a video element and the will lazy load element steps given the video return true, + then:

      + +
        +

      1. Let resumptionSteps be the rest of this algorithm starting with the step labeled Let mode be remote.

        2. + +

      2. If the video has a poster attribute specified and its value is not the empty string, then set resumptionSteps to an algorithm that runs the algorithm resumptionSteps, then runs the algorithm to determine the element's poster frame (as defined in the poster attribute processing).

        3. + +

      3. Set the video's lazy load resumption steps to resumptionSteps.

        4. + +

      4. Start intersection-observing a lazy loading element for the + video element.

        5. + +

      5. Return.

        6. +
      +
      2. +

    2. Let mode be remote.

    3. @@ -38908,6 +39030,11 @@ interface MediaError { has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

      +

      In video elements, if + scripting is enabled, the loading attribute can defer the + preload attribute's hinted behavior until the element's lazy loading + attribute is in the Lazy state.

      +