W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: a :time pseudo-class for media elements (and examples on how it would be useful and generic)

From: Julien Dorra <juliendorra@juliendorra.com>
Date: Sat, 4 Aug 2012 16:47:59 +0200
Message-ID: <CALfAofUg-B8iVXE8Sog991=dBr2NVVrKvTWAvZuiAfsu=pCWBQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org, birtles@gmail.com, Brian Kardell <bkardell@gmail.com>

> AFAIK, track also doesn't allow to *style* the text nodes in the track
> > depending of where we are in the media timeline.
> >
> > For example placing the subtitle in a specific area of the video at a
> > certain time, or turn a black background on for the Track text for
> > readablity when we are at a portion where the video is to bright.
> Ah, right, this is true.  That's a good use-case for the feature, too.
> Maybe we can add something to
> http://dev.w3.org/csswg/selectors4/#time-pseudos , like:
> :time( [ before <time> | after <time> | <time> to <time> ] )

Very interesting. Would it be even more generic, in your idea, then?
For example, would the browser for any element with a timeline defined,
even for a DIV or a A?

With such a generic time selector, and the sync containers, we could
directly style a A like that (simplified the syntax by omitting source and

-- given the markup [the PAR with the mediaGroup attribute would lock the
elements in sync, if i'm not mistaken] --

<par mediaGroup="mygroup">
    <video mediaGroup="mygroup"></video>
    <a mediaGroup="mygroup">My hyperlinked subtitle appearing at 3s for 2

-- and the style rule --

a {display:none;}
a:time(3000,5000) {display:block;}

The A would be selected and styled to be displayed (or be animated to
wiggle, or change to a bright color, etc.) when we are in the 3000ms to
5000ms part of the mediaGroup timeline (defined by the media element by

That would be a super simple syntax to understand, and would allow
beginners to tinker with it very quickly. (Yes, I still believe in hand
editing HTML and CSS, how naive of me :-)

> > Have you some ideas about that? Do you think everything is going to be
> > animatable in the end?
> Yes, it will be.  The exact mechanism to use is undecided, but one way
> or another, all CSS properties will be animatable.

Very good news, indeed :-)

One use case I would be curious to hear your though on is applying a filter
> > to (for example) the first 3 seconds of all videos of class "tutorial"
> on a
> > website.
> >
> > With a :media-time pseudo class, you would just write
> >
> > video.tutorial:media-time(0-3000) {filter: grayscale(100%) sepia(100%);}
> >
> > And you're done.
> Ideally it should be easy, so it shouldn't feel like overkill.
> The only thing I'm not sure of right now is how we could establish a
> container for just the content you're tying to the video.  Presumably
> this will be easy, like a property on a container element or
> something.
> Once you have that, it's simple - just use the "media-group" property
> (same functionality as the mediagroup='' attribute currently in HTML)
> to tie the video and the html fragment together, and they'll be slaved
> together.  Done!

But what if you want to *directly* style the VIDEO element itself
differently along it's own timeline?

Like applying filters to it at some moment in the video, changing its
position in the page (think of a video bubble moving over a map as the
speaker talk about the given country) or its size when it start playing?

I don't see how it can be done with the mediagroup attribute or property?

In any case, you can count on me as a new evangelist for the Web Animations
future specs ;-)
Received on Saturday, 4 August 2012 14:49:09 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:19 UTC