I want state-based pseudo-classes for media elements

[aarongustafson]

Sometimes you want to style video elements differently depending on if they're playing or not. For example, in the paused state we want to show a play button on top of the video element, and hide that when the video starts playing. For that, it would be great if you could use CSS pseudo-classes to target the video state:

video:playing { ... }
video:paused { ... }

That would make styling more straightforward. Currently, we have to listen to JavaScript events and conditionally set classes on the element that we can only then target with CSS.

This could further be expended with :loading, :stopped and :error pseudo-classes. The :error class could also apply to img and picture elements if the source returns an error code or can't be found.

Mozilla Firefox has some precedent here, with the :moz-broken and :moz-loading pseudo-classes.

---

https://webwewant.fyi/wants/5ea6f92ad3873ee397985e54/

[FremyCompany]

FWIW in case someone want a base for a draft:
http://fremycompany.com/TR/2012/ED-css-content-state/

(and some open issues)

[Kilian]

From twitter:

this is actually a good one to tie to controls. One aspect that's good about the video element is that its parts have been relatively standardized already.

Ref: https://twitter.com/gregwhitworth/status/1254817734367404033?s=21

[Kilian]

Additionally, :error and :loading could work for all embedded content (iframe, object).

A simple use case would be to hide these on error, something that required javascript currently.

[aarongustafson]

Some of these are addressed in CSS Selectors 4

[guest271314]

This is possible to some extent using WebVTT https://stackoverflow.com/a/39563620, https://stackoverflow.com/a/48201698.

[aarongustafson]

So, following the first link, are you thinking that you could polyfill by creating class-based equivalences (or similar) using a combination of standard media events and track cue-ing?

[guest271314]

Yes. There is only so much styling a video element can have. We could go so far as to use Web Components Custom Elements. It is already possible to style video elements to some extent using pseudo elements ::-webkit-media-controls https://github.com/guest271314/MediaFragmentRecorder/blob/getdisplaymedia-webaudio-windowopen/MediaFragmentRecorder.html#L23 and ::cue https://stackoverflow.com/questions/41067161/detecting-cue-pseudo-element-or-doing-something-when-cue-is-not-supported-i/41069649#41069649. Alternatively, since some degree of effort needs to be put into the requirement, one option is to create a web media player from scratch using <canvas> and MediaStreamTracks, e.g., https://stackoverflow.com/a/45343042.