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

On Fri, Aug 3, 2012 at 4:43 PM, Julien Dorra
<juliendorra@juliendorra.com> wrote:
> 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> ] )


> One limitation is that not all CSS properties are animatable at the moment
> (http://oli.jp/2010/css-animatable-properties/ for a nice list of the ones
> that are)
>
> 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.


> And a bonus question :-) for you:
>
> 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.
>
> Don't you think animations and sync container would be overkill in term of
> markup and style for that kind of styling? Could you give a quick example of
> how you would do it with Sync containers and animations to get a better feel
> of how it would work for very simple use cases?

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!

(I'm not sure if the 'media-group' property shows up in the draft yet,
but it was agreed on in discussion.)

~TJ

Received on Saturday, 4 August 2012 02:45:28 UTC