Skip to content

[selectors-4] Define a number of new pseudo-classes for matching the state of media elements. #6219

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

Merged
merged 3 commits into from
Apr 22, 2021
Merged

[selectors-4] Define a number of new pseudo-classes for matching the state of media elements. #6219

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
996e587
[selectors-4] First draft of :seeking, :buffering, :stalled, :muted, …
hober Apr 16, 2021
59f2bc1
Use link-defaults instead of anchors for several terms defined in HTML.
hober Apr 21, 2021
6599d0b
Remove unnecessary comment and fix whitespace.
hober Apr 21, 2021
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
55 changes: 50 additions & 5 deletions selectors-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ spec:css-pseudo-4; type:selector;
text: ::after
text: ::first-line
text: ::first-letter
spec:HTML; type:dfn;
text: effective media volume
text: seeking
text: media data
text: stall timeout
</pre>

<style>
Expand Down Expand Up @@ -2404,22 +2409,62 @@ Resource State Pseudos</h2>
and allow authors to select them based on some quality of their state.

<h3 id="video-state">
Video/Audio Play State: the '':playing'' and '':paused'' pseudo-classes</h3>
Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-classes</h3>

The <dfn>:playing</dfn> pseudo-class represents an element
representing an audio, video, or similar resource
that is capable of being “played” or “paused”,
when that element is “playing”.
(This includes both when the element is explicitly playing,
and when it's temporarily stopped for some reason not connected to user intent,
but will automatically resume when that reason is resolved,
such as a “buffering” state.)
such as a “buffering” or “stalled” state.)

The <dfn>:paused</dfn> pseudo-class represents the same elements,
but instead match when the element is <em>not</em> “playing”.
The <dfn>:paused</dfn> pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element is “paused” (i.e. <em>not</em> ”playing”).
(This includes both an explicit “paused” state,
and other non-playing states like “loaded, hasn't been activated yet”, etc.)

The <dfn>:seeking</dfn> pseudo-class represents an element
that is capable of ”seeking”
when that element is ”seeking”.
(For the <{audio}> and <{video}> elements of HTML, see [[HTML#seeking]].)

<h3 id="media-loading-state">
Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes</h3>

The <dfn>:buffering</dfn> pseudo-class represents an element
that is capable of being “played” or “paused”,
when that element cannot continue playing
because it is actively attempting to obtain [=media data=]
but has not yet obtained enough data to resume playback.
(Note that the element is still considered to be “playing” when it is “buffering”.
Whenever '':buffering'' matches an element,
'':playing'' also matches the element.)

The <dfn>:stalled</dfn> pseudo-class represents an element
when that element cannot continue playing
because it is actively attempting to obtain [=media data=]
but it has failed to receive any data for some amount of time.
For the <{audio}> and <{video}> elements of HTML,
this amount of time is the [=stall timeout=]. [[HTML]]
(Note that, like with the '':buffering'' pseudo-class,
the element is still considered to be “playing” when it is “stalled”.
Whenever '':stalled'' matches an element,
'':playing'' also matches the element.)

<h3 id="sound-state">
Sound State: the '':muted'' and '':volume-locked'' pseudo-classes</h3>

The <dfn>:muted</dfn> pseudo-class represents
an element capable of making sound
when that element is “muted“.
(For the <{audio}> and <{video}> elements of HTML, see [=muted=]. [[HTML]])

The <dfn>:volume-locked</dfn> pseudo-class represents
an element capable of making sound
when programmatically changing the element’s volume
does not change the element's [=effective media volume=].

<h2 id='input-pseudos'>
The Input Pseudo-classes</h2>
Expand Down