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

[Steve Lacey]

As someone who's actively working on media controls, I'd love to see this.

Also need some audio pseudo-classes (e.g. muted).

Cheers!
Steve

On Sun, Apr 24, 2011 at 9:04 PM, Dimitri Glazkov <dglazkov at chromium.org>wrote:

> 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
> >>>
> >>
> >
>