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

Jump to bottom

[HTMLMediaElement] Add a controlsList/controlslist attribute. #2426

Closed
wants to merge 2 commits into from
Closed

[HTMLMediaElement] Add a controlsList/controlslist attribute. #2426

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbf0be7
[HTMLMediaElement] Add a controlsList/controlslist attribute.
avayvod Mar 9, 2017
2a4fc93
Addressed Domenic's comments
avayvod Mar 9, 2017
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
63 changes: 60 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30194,6 +30194,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 data-x="concept-element-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
Expand Down Expand Up @@ -30586,6 +30587,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-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class="idl">[<span>HTMLConstructor</span>, NamedConstructor=<span data-x="dom-Audio">Audio</span>(optional DOMString src)]
Expand Down Expand Up @@ -31033,6 +31035,8 @@ 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turns out we recently discovered CEReactions is not necessary for DOMTokenList attributes: #2378. (It's actually disallowed these days.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

<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 @@ -31047,8 +31051,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 @@ -36503,6 +36508,46 @@ red:89
<p>The <dfn><code 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>, and
<dfn><code data-x="attr-media-controlslist-noremoteplayback">noremoteplayback</code></dfn>.

<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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these be "causes ... to be hidden", or maybe instead "hints that ... should be hidden"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

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-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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be worth adding something like

<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>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style nit: this seems like a normative "may", not a "might". I'd then move the example to

<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>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

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 @@ -114158,7 +114203,8 @@ interface <dfn>External</dfn> {
<code data-x="attr-media-autoplay">autoplay</code>;
<code data-x="attr-media-loop">loop</code>;
<code data-x="attr-media-muted">muted</code>;
<code data-x="attr-media-controls">controls</code></td>
<code data-x="attr-media-controls">controls</code>
<code data-x="attr-media-controlslist">controlslist</code></td>
<td><code>HTMLAudioElement</code></td>
</tr>

Expand Down Expand Up @@ -115652,6 +115698,7 @@ interface <dfn>External</dfn> {
<code data-x="attr-media-loop">loop</code>;
<code data-x="attr-media-muted">muted</code>;
<code data-x="attr-media-controls">controls</code>;
<code data-x="attr-media-controlslist">controlslist</code>;
<code data-x="attr-dim-width">width</code>;
<code data-x="attr-dim-height">height</code></td>
<td><code>HTMLVideoElement</code></td>
Expand Down Expand Up @@ -116267,6 +116314,16 @@ interface <dfn>External</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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should ideally follow the example of iframe sandbox in the index, i.e.

Unordered set of unique space-separate tokens, ASCII case-insensitive, consisting of ...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

<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>", 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