- From: Dimitri Glazkov <dglazkov@chromium.org>
- Date: Sun, 24 Apr 2011 21:04:22 -0700
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 >>> >> >
Received on Sunday, 24 April 2011 21:04:22 UTC