[whatwg] Dynamic pseudo-classes on video/audio element to allow styling of controls

[Dimitri Glazkov]

Based on WebKit's current media controls, let's start with these pseudo-classes:

Play state:
- loading
- playing
- streaming
- error

Capabilities:
- no-audio
- no-video
- has-closed-captioning

So, to show a status message while the control is loading or streaming
and hide when it's done:

video -webkit-media-controls-status-display {
    display: none;
}


video:loading -webkit-media-controls-status-display, video:streaming
-webkit-media-controls-status-display {
    display: initial;
    ...
}

Similarly, to hide volume controls when there's no audio:

video:no-audio -webkit-media-controls-volume-slider-container {
    display: none;
}

Once I put these pseudo-classes in place for WebKit, a lot of the code
in http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/html/shadow/MediaControlRootElement.cpp&exact_package=chromium
will go away, being replaced with straight CSS.

:DG<

On Sun, Apr 24, 2011 at 8:31 PM, Silvia Pfeiffer
<silviapfeiffer1 at gmail.com> wrote:
> A markup and CSS example would make things clearer. How do you think
> it would look?
> Silvia.
>
>
> On Sun, Apr 24, 2011 at 9:40 AM, Dimitri Glazkov <dglazkov at chromium.org> wrote:
>> On Sat, Apr 23, 2011 at 1:57 PM, Philip Jägenstedt <philipj at opera.com> wrote:
>>> On Sat, 23 Apr 2011 21:32:06 +0200, Dimitri Glazkov <dglazkov at chromium.org>
>>> wrote:
>>>
>>>> On Sat, Apr 23, 2011 at 11:37 AM, Philip Jägenstedt <philipj at opera.com>
>>>> wrote:
>>>>>
>>>>> On Sat, 23 Apr 2011 17:02:56 +0200, Dimitri Glazkov
>>>>> <dglazkov at chromium.org>
>>>>> wrote:
>>>>>
>>>>>> On Sat, Apr 23, 2011 at 2:57 AM, Philip Jägenstedt <philipj at opera.com>
>>>>>> wrote:
>>>>>>>
>>>>>>> On Sat, 23 Apr 2011 05:25:20 +0200, Dimitri Glazkov
>>>>>>> <dglazkov at chromium.org>
>>>>>>> wrote:
>>>>>>>
>>>>>>>> I wonder if it makes sense to introduce a set of pseudo-classes on the
>>>>>>>> video/audio elements, each reflecting a state of the media on the
>>>>>>>> controls (playing/paused/error/etc.)? Then, we could use just CSS to
>>>>>>>> style media controls (whether native or custom), and not have to
>>>>>>>> listen to DOM events just to tweak their appearance.
>>>>>>>
>>>>>>> With a sufficiently large set of pseudo-classes it might be possible to
>>>>>>> do
>>>>>>> *display* most of the interesting state, but how would you *change* the
>>>>>>> state without using scripts? Play/pause, seek, volume, etc...
>>>>>>
>>>>>> This is not the goal of using pseudo-classes: they just provide you
>>>>>> with a uniform way to react to changes.
>>>>>
>>>>> In other words, one would still have to rely heavily on scripts to
>>>>> actually
>>>>> implement custom controls?
>>>>
>>>> Heavily is subjective. But yep :)
>>>>
>>>>>
>>>>> Also, how would one style a progress bar using pseudo-classes? How about
>>>>> a
>>>>> displaying elapsed/remaining time on the form MM:SS?
>>>>
>>>> I am not in any way trying to invent a magical way to style media
>>>> controls entirely in CSS. Just trying to make the job of controls
>>>> developers easier and use CSS where it's well... useful? :)
>>>
>>> Very well, what specific set pseudo-classes do you think would be useful?
>>
>> I can infer what would be useful from WebKit's media controls as a first stab?
>>
>> :DG<
>>
>>>
>>> --
>>> Philip Jägenstedt
>>> Core Developer
>>> Opera Software
>>>
>>
>