Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add lazy-loading for <video poster> #8428

Closed
wants to merge 2 commits into from
Closed

Add lazy-loading for <video poster> #8428

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15c741c
Add lazy-loading for <video poster>
zcorpan Oct 25, 2022
abf6d07
Nits
zcorpan Nov 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 75 additions & 9 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7342,14 +7342,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><p>Return false.</p></li>
</ol>

<p>Each <code>img</code> and <code>iframe</code> element has associated <dfn>lazy load resumption
steps</dfn>, initially null.</p>
<p>Each <code>img</code>, <code>iframe</code> and <code>video</code> element has associated
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<dfn>lazy load resumption steps</dfn>, initially null.</p>

<p class="note">For <code>img</code> and <code>iframe</code> elements that <span data-x="will lazy
load element steps">will lazy load</span>, these steps are run from the <span>lazy load
intersection observer</span>'s callback or when their <span>lazy loading attribute</span> is set
to the <span data-x="attr-loading-eager-state">Eager</span> state. This causes the element to
continue loading.</p>
<p class="note">For <code>img</code>, <code>iframe</code> and <code>video</code> elements that
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<span data-x="will lazy load element steps">will lazy load</span>, these steps are run from the
<span>lazy load intersection observer</span>'s callback or when their <span>lazy loading
attribute</span> is set to the <span data-x="attr-loading-eager-state">Eager</span> state. This
causes the element to continue loading.</p>

<p>Each <code>Document</code> has a <dfn>lazy load intersection observer</dfn>, initially set to
null but can be set to an <code>IntersectionObserver</code> instance.</p>
Expand Down Expand Up @@ -33096,6 +33096,7 @@ interface <dfn interface>HTMLObjectElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-media-src">src</code></dd>
<dd><code data-x="attr-media-crossorigin">crossorigin</code></dd>
<dd><code data-x="attr-video-poster">poster</code></dd>
<dd><code data-x="attr-video-posterloading">posterloading</code></dd>
<dd><code data-x="attr-media-preload">preload</code></dd>
<dd><code data-x="attr-media-autoplay">autoplay</code></dd>
<dd><code data-x="attr-video-playsinline">playsinline</code></dd>
Expand All @@ -33119,6 +33120,7 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
readonly attribute unsigned long <span data-x="dom-video-videoWidth">videoWidth</span>;
readonly attribute unsigned long <span data-x="dom-video-videoHeight">videoHeight</span>;
[<span>CEReactions</span>] attribute USVString <span data-x="dom-video-poster">poster</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-video-posterLoading">posterLoading</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-video-playsInline">playsInline</span>;
};</code></pre>
</dd>
Expand Down Expand Up @@ -33158,8 +33160,29 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
data is available. The attribute, if present, must contain a <span>valid non-empty URL
potentially surrounded by spaces</span>.</p>

<p>The <dfn element-attr for="video"><code
data-x="attr-video-posterloading">posterloading</code></dfn> attribute is a <span>lazy
loading attribute</span>. Its purpose is to indicate the policy for loading the image given by the
<code data-x="attr-video-poster">poster</code> attribute of <code>video</code> elements that are
outside the viewport.</p>

<div w-nodev>

<p>When the <code data-x="attr-video-posterloading">posterloading</code> attribute's state is
changed to the <span data-x="attr-loading-eager-state">Eager</span> state, the user agent must run
these steps:</p>

<ol>
<li><p>Let <var>resumptionSteps</var> be the <code>video</code> element's <span>lazy load
resumption steps</span>.</p></li>

<li><p>If <var>resumptionSteps</var> is null, then return.</p></li>

<li><p>Set the <code>video</code>'s <span>lazy load resumption steps</span> to null.</p></li>

<li><p>Invoke <var>resumptionSteps</var>.</p></li>
</ol>

<p>If the specified resource is to be used, then, when the element is created or when the <code
data-x="attr-video-poster">poster</code> attribute is set, changed, or removed, the user agent must
run the following steps to determine the element's <dfn>poster frame</dfn> (regardless of the
Expand Down Expand Up @@ -33187,8 +33210,39 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
<span data-x="concept-request-credentials-mode">credentials mode</span> is "<code
data-x="">include</code>", and whose <span>use-URL-credentials flag</span> is set.

<li><p><!--FETCH--><span data-x="concept-fetch">Fetch</span> <var>request</var>. This must
<span>delay the load event</span> of the element's <span>node document</span>.</p></li>
<li><p>Let <var>delay load event</var> be true if the <code>video</code>'s <span>lazy loading
attribute</span> is in the <span data-x="attr-loading-eager-state">Eager</span> state, or if
<span data-x="concept-n-noscript">scripting is disabled</span> for the <code>video</code>, and
false otherwise.</p></li>

<li>
<p>If the <span>will lazy load element steps</span> given the <code>video</code> return true,
then:</p>

<ol>
<li><p>Set the <code>video</code>'s <span>lazy load resumption steps</span> to the rest of this
algorithm starting with the step labeled <i>fetch the poster image</i>.</p></li>

<li><p><span>Start intersection-observing a lazy loading element</span> for the
<code>video</code> element.</p></li>

<li><p>Return.</p></li>
</ol>
</li>

<li>
<!--FETCH-->
<p><i>Fetch the poster image</i>: <span data-x="concept-fetch">Fetch</span>
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<var>request</var>.</p>


<!-- similar text in <img>, <input type=image> -->
<p>When <var>delay load event</var> is true, fetching the image must <span>delay the load
event</span> of the element's <span>node document</span> until the <span
data-x="concept-task">task</span> that is <span data-x="queue a task">queued</span> by the
<span>networking task source</span> once the resource has been fetched has been run.
<!--TODO or the fetch was aborted, presumably --></p>
</li>

<!-- could define how to sniff for an image here -->

Expand Down Expand Up @@ -33401,6 +33455,11 @@ interface <dfn interface>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span>
IDL attribute must <span>reflect</span> the <code data-x="attr-video-poster">poster</code> content
attribute.</p>

<p>The <dfn attribute for="HTMLVideoElement"><code
data-x="dom-video-posterLoading">posterLoading</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-video-posterloading">posterloading</code> content
attribute, <span>limited to only known values</span>.</p>

<p>The <dfn attribute for="HTMLVideoElement"><code
data-x="dom-video-playsInline">playsInline</code></dfn> IDL attribute must <span>reflect</span>
the <code data-x="attr-video-playsinline">playsinline</code> content attribute.</p>
Expand Down Expand Up @@ -128084,6 +128143,7 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-media-src">src</code>;
<code data-x="attr-media-crossorigin">crossorigin</code>;
<code data-x="attr-video-poster">poster</code>;
<code data-x="attr-video-posterloading">posterloading</code>;
<code data-x="attr-media-preload">preload</code>;
<code data-x="attr-media-autoplay">autoplay</code>;
<code data-x="attr-video-playsinline">playsinline</code>;
Expand Down Expand Up @@ -129206,6 +129266,12 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="attr-video-poster">video</code>
<td> Poster frame to show prior to video playback
<td> <span>Valid non-empty URL potentially surrounded by spaces</span>
<tr>
<th> <code data-x="">posterloading</code>
<td> <code data-x="attr-video-posterloading">video</code>
<td> Used when determining loading deferral of the poster frame
<td> "<code data-x="attr-loading-lazy">lazy</code>";
"<code data-x="attr-loading-eager">eager</code>"
<tr>
<th> <code data-x="">preload</code>
<td> <code data-x="attr-media-preload">audio</code>;
Expand Down