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

On Sat, Aug 4, 2012 at 7:47 AM, Julien Dorra
<juliendorra@juliendorra.com> wrote:
> 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?

Yeah, anything with a concept of a timeline attached to it would get
it, just like they'd get the :past, :current, and :future ones.

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

Yes, something like that.

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

Oh, sorry, I misunderstood your example.  In that case, just use
:time() on the <video> itself, yeah.

~TJ

Received on Saturday, 4 August 2012 17:31:39 UTC