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

Hi,

> 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
href):

-- 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
seconds</a>
</par>

-- 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
default???).

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?


Thanks!
In any case, you can count on me as a new evangelist for the Web Animations
future specs ;-)
Julien