The :playing 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”.
The :paused pseudo-class represents the same elements, but instead matches when the element is not “playing”.Motivation
Which collectively address the use case of a custom "play/pause" media control which should appear as a play button or as a pause button depending on the current play state of the associated media element.Is this feature fully tested in Web Platform Tests?
No, not yet.Tracking bug URLhttps://bugs.chromium.org/p/chromium/issues/detail?id=1176947Spec link
Not needed since it's an existing spec discussed.Interoperability and Compatibility Risks
For the <audio> element Chrome already exposes this state internally by means of a class .state-playing / .state-paused on the ::-webkit-media-controls pseudo element.
Firefox: No signal
Safari: No signal
Edge: No signal
Web developers: No signalLink to entry on the Chrome Platform Statushttps://chromestatus.com/features/6299876096737280