I want state-based pseudo-classes for media elements

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.