[whatwg] Video playback UI

[Alexey Feldgendler]

Recently, there has been some debate about whether the browser should  
present its own standard UI for playback control or let the authors design  
their own UI (branded and consistent with the site design).

Browser-provided UI has the advantage of having the same UI across all  
pages, which the user can get familiar with, as well as making it easier  
to "just put a video clip into a blog entry". Also, when the authors have  
to implement their own controls, they can easily neglect some of the less  
important ones (like seek contols), resulting in poorer usability and  
accessibility.

Author-provided UI has the advantage of allowing branded design. Without  
this, there might be not enough incentive for authors to switch to <video>  
because Flash makes it possible to do branding.

A compromise solution that I propose is to include a standard set of  
browser-provided controls, displayed by default and styleable through CSS  
pseudo-elements and pseudo-classes:

video
     :playing (pseudo-class)
     :stopped (pseudo-class)
     :toolbar (pseudo-element)
         :button (pseudo-class)
         :play (pseudo-element)
         :pause (pseudo-element)
         :stop (pseudo-element)
         :rew (pseudo-element)
         :ff (pseudo-element)
         ...

Examples:

Hide the controls completely:
video:toolbar { display: none }

Provide a border for all buttons:
video:toolbar:button { border: thin black }

Provide a custom icon for the Stop button:
video:toolbar:stop { background: url(...) }

By default, pause button is only shown while playing and hidden while  
stopped. Override this:
video:stopped:pause { display: block }

Advantages:

* With default styling, <video> has a set of ready-to-use playback  
controls.

* It's possible to express branded design or even completely get rid of  
the controls.

* Styling can be overriden in the user agent (user CSS).

Disadvantages:

* Requires implementation effort in browsers.

* Makes it impossible to do such branding which cannot be circumvented.  
Being a user myself, I'd rather consider it a feature.


-- 
Alexey Feldgendler <alexey at feldgendler.ru>
[ICQ: 115226275] http://feldgendler.livejournal.com