Skip to content

[HTMLMediaElement] Add a controlsList/controlslist attribute #6715

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

Open
beaufortfrancois wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[HTMLMediaElement] Add a controlsList/controlslist attribute #6715

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 64 additions & 6 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32144,6 +32144,7 @@ interface <dfn>HTMLParamElement</dfn> : <span>HTMLElement</span> {
<dd><code data-x="attr-media-loop">loop</code></dd>
<dd><code data-x="attr-media-muted">muted</code></dd>
<dd><code data-x="attr-media-controls">controls</code></dd>
<dd><code data-x="attr-media-controlslist">controlslist</code></dd>
<dd><code data-x="attr-dim-width">width</code></dd>
<dd><code data-x="attr-dim-height">height</code></dd>
<dt><span
Expand Down Expand Up @@ -32191,8 +32192,9 @@ interface <dfn>HTMLVideoElement</dfn> : <span>HTMLMediaElement</span> {

<p>The <code data-x="attr-media-src">src</code>, <code data-x="attr-media-crossorigin">crossorigin</code>,
<code data-x="attr-media-preload">preload</code>, <code data-x="attr-media-autoplay">autoplay</code>,
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>, and <code
data-x="attr-media-controls">controls</code> attributes are <span data-x="media element
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>, <code
data-x="attr-media-controls">controls</code>, and <code
data-x="attr-media-controlslist">controlslist</code> attributes are <span data-x="media element
attributes">the attributes common to all media elements</span>.</p>

<p>The <dfn element-attr for="video"><code data-x="attr-video-poster">poster</code></dfn>
Expand Down Expand Up @@ -32534,6 +32536,7 @@ zero or more <code>track</code> elements, then
<dd><code data-x="attr-media-loop">loop</code></dd>
<dd><code data-x="attr-media-muted">muted</code></dd>
<dd><code data-x="attr-media-controls">controls</code></dd>
<dd><code data-x="attr-media-controlslist">controlslist</code></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-audio">For authors</a>.</dd>
Expand Down Expand Up @@ -32587,8 +32590,9 @@ interface <dfn>HTMLAudioElement</dfn> : <span>HTMLMediaElement</span> {

<p>The <code data-x="attr-media-src">src</code>, <code data-x="attr-media-crossorigin">crossorigin</code>,
<code data-x="attr-media-preload">preload</code>, <code data-x="attr-media-autoplay">autoplay</code>,
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>, and <code
data-x="attr-media-controls">controls</code> attributes are <span data-x="media element
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>, <code
data-x="attr-media-controls">controls</code>, and <code
data-x="attr-media-controlslist">controlslist</code> attributes are <span data-x="media element
attributes">the attributes common to all media elements</span>.</p>

<dl class="domintro">
Expand Down Expand Up @@ -32982,6 +32986,7 @@ interface <dfn>HTMLMediaElement</dfn> : <span>HTMLElement</span> {

// controls
[<span>CEReactions</span>] attribute boolean <span data-x="dom-media-controls">controls</span>;
[SameObject, PutForwards=<span data-x="dom-DOMTokenList-value">value</span>] readonly attribute <span>DOMTokenList</span> <span data-x="dom-media-controlsList">controlsList</span>;
attribute double <span data-x="dom-media-volume">volume</span>;
attribute boolean <span data-x="dom-media-muted">muted</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-media-defaultMuted">defaultMuted</span>;
Expand All @@ -32996,8 +33001,9 @@ interface <dfn>HTMLMediaElement</dfn> : <span>HTMLElement</span> {
<p>The <dfn>media element attributes</dfn>, <code data-x="attr-media-src">src</code>, <code
data-x="attr-media-crossorigin">crossorigin</code>, <code
data-x="attr-media-preload">preload</code>, <code data-x="attr-media-autoplay">autoplay</code>,
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>, and
<code data-x="attr-media-controls">controls</code>, apply to all <span data-x="media
<code data-x="attr-media-loop">loop</code>, <code data-x="attr-media-muted">muted</code>,
<code data-x="attr-media-controls">controls</code>, and
<code data-x="attr-media-controlslist">controlslist</code> apply to all <span data-x="media
element">media elements</span>. They are defined in this section.</p>

<!-- proposed v2 (actually v3!) features:
Expand Down Expand Up @@ -38089,6 +38095,52 @@ red:89
data-x="dom-media-controls">controls</code></dfn> IDL attribute must <span>reflect</span> the
content attribute of the same name.</p>

</div>

<p>The <dfn><code data-x="attr-media-controlslist">controlslist</code></dfn> attribute, when
specified, helps the user agent select what controls to show on the media element whenever
the user agent shows its own set of controls. Its value must be an <span>unordered set of unique
space-separated tokens</span> that are <span>ASCII case-insensitive</span>. The allowed values
are <dfn><code data-x="attr-media-controlslist-nodownload">nodownload</code></dfn>, <dfn><code
data-x="attr-media-controlslist-nofullscreen">nofullscreen</code></dfn>,
<dfn><code
data-x="attr-media-controlslist-noplaybackrate">noplaybackrate</code></dfn>,
and <dfn><code
data-x="attr-media-controlslist-noremoteplayback">noremoteplayback</code></dfn>.</p>

<p>The <code data-x="attr-media-controlslist-nodownload">nodownload</code> keyword hints that the
download control should be hidden when using the user agent's own set of controls for the media
element. The <code data-x="attr-media-controlslist-nofullscreen">nofullscreen</code> keyword
hints that the fullscreen mode control should be hidden when using the user agent's own set of
controls for the media element. The <code
data-x="attr-media-controlslist-noplaybackrate">noplaybackrate</code> keyword
hints that the playback speed control should be hidden when using the user
agent's own set of controls for the media element. The <code
data-x="attr-media-controlslist-noremoteplayback">noremoteplayback</code>
keyword hints that the remote playback control should be hidden when using the
user agent's own set of controls for the media element.</p>

<p class="note">Hiding these aspects of the user agent's own controls does not necessarily disable
the related functionality. For example, the user agent might present the same functionality
through a context menu or keyboard shortcut.</p>

<div w-nodev>

<p>The <dfn><code data-x="dom-media-controlsList">controlsList</code></dfn> IDL attribute must
<span>reflect</span> the value of the <span data-x="attr-media-controlslist">controlslist</span>
content attribute.</p>

<p>The <span data-x="concept-supported-tokens">supported tokens</span> for <code
data-x="dom-media-controlsList">controlsList</code>'s <code>DOMTokenList</code> are the allowed
values defined in the <code data-x="attr-media-controlslist">controlslist</code> attribute and
supported by the user agent.</p>

<p>A user agent MAY ignore the author's preference when it makes sense.</p>

<p class="example">A user agent might ignore the <code
data-x="attr-media-controlslist-nofullscreen">nofullscreen</code> keyword if the content area
containing the video is small, such as on a mobile device.</p>

<hr>

</div>
Expand Down Expand Up @@ -121676,6 +121728,12 @@ interface <dfn>MimeType</dfn> {
<code data-x="attr-media-controls">video</code>
<td> Show user agent controls
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">controlslist</code>
<td> <code data-x="attr-media-controlslist">audio</code>;
<code data-x="attr-media-controlslist">video</code>
<td> Show/hide specific user agent controls
<td> <span>Unordered set of unique space-separated tokens</span>, <span>ASCII case-insensitive</span>, consisting of "<code data-x="attr-media-controlslist-nodownload">nodownload</code>", "<code data-x="attr-media-controlslist-nofullscreen">nofullscreen</code>", "<code data-x="attr-media-controlslist-noplaybackrate">noplaybackrate</code>", and "<code data-x="attr-media-controlslist-noremoteplayback">noremoteplayback</code>".
<tr>
<th> <code data-x="">coords</code>
<td> <code data-x="attr-area-coords">area</code>
Expand Down