Media pseudo classes: :paused/:playing/:seeking/:buffering/:stalled/:muted/:volume-locked

[nt1m]

Description

Pseudo classes to target specific states of video/audio.

Rationale

They are implemented in WebKit, but not Blink/Gecko, seems like low hanging fruit for web developers to have those implemented everywhere.

Specification

W3C: https://w3c.github.io/csswg-drafts/selectors-4/#resource-pseudos

Tests

WPT:

css/selectors/media/media-loading-state.html
css/selectors/media/media-playback-state.html
css/selectors/media/sound-state.html

[marcoscaceres]

Sam suggested we might look into "trickle" for stalled cases... might help. Otherwise, there might be a way of hacking it with a service worker.

[marcoscaceres]

Tests ported web-platform-tests/wpt#36565

[foolip]

Does :volume-locked ever match in Safari? I can't tell what it's for from reading the spec alone.

[foolip]

I found this comment about :volume-locked in the test:

https://github.com/web-platform-tests/wpt/blob/fda7f3a6ff0c16957f59181cc86aaece404414e0/css/selectors/media/sound-state.html#L12-L13

Unless the spec is clarified about what the psuedo-class does and it can be tested, I think that should be out of scope.

[nt1m]

Sure, we can exclude :volume-locked

[foolip]

Even better would be if it was defined though. Does anyone know what it does?

[marcoscaceres]

@foolip do you mean beyond what's specified in Selectors 4?

I'm just guessing here, but presumedly the media format somehow forbids changing the volume of the <audio> or <video> (I can't see any other means provided by the APIs).

[marcoscaceres]

I asked internally. This is what I learned:

On some platforms, programmatically changing the media’s .volume property won’t actually change the output volume. That’s because the media element’s volume is tied to the overall system volume level. There is no per-media-element gain control.

So, websites shouldn’t display their own volume controls on those platforms. Using :volume-locked is how they would know whether or not to display a volume slider.

That makes total sense!

[foolip]

Thanks @marcoscaceres! I've filed w3c/csswg-drafts#8061 to clarify the spec.

I used to work on media elements and think this looks like a pretty simple thing to implement, but I do wonder about the rationale. Having gone through the State of CSS 2022 results to produce #248, there wasn't any mention of this feature. Is there other evidence of web developer demand for this?

[foolip]

I've also filed https://bugs.chromium.org/p/chromium/issues/detail?id=1383480.

[lilles]

Implementation of :playing/:paused is behind a test flag in Blink, but shipping[1] seemingly stalled because there was no html spec for the media states. Is that properly in place now?

[1] https://groups.google.com/a/chromium.org/g/blink-dev/c/kz3w-yOMDks/m/Ue71o4xYAAAJ

[nairnandu]

Thank you for proposing media pseudo classes for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. This should not be taken as a comment on the technology as a whole, and resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.