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

(2012/08/04 23:47), Julien Dorra wrote:
> 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?

I think I'm going to pretty much agree with what Tab wrote.

Firstly, there are ways to realise this use-case already but we simply 
haven't worked out the CSS mapping.

E.g.

<par mediaGroup="mygroup">
   <video mediaGroup="mygroup" id="video"></video>
   <animate href="#video" attributeName="filter" ...></animate>
</par>

For CSS, I think the :media-time proposal, if extended to all elements 
as Tab suggests, would be a good way to achieve this.

I think there's utility for this beyond just media elements. For example,

div.welcome:time(3000) {
    display: none;
}

would be simpler than setting up the equivalent CSS animation.

The interpretation of "3000" would be to use the time space of the 
target element. That's normally going to be the time space of the 
document's content timeline but if you add a parent animation group 
(e.g. <par> etc.) it will be different. You would also define <video>, 
<audio> etc. as establishing a new time space.

Incidentally, that final step would also simplify the element syntax to 
the following:

<video id="video">
   <animate begin="3s" dur="2s" attributeName="filter" ...></animate>
</video>

My main concern is that updating the caption in sync with the video in 
the following example seems complicated:

For example:

  <div>
    <div class="caption">Caption</div>
  </div>
  <div>
    <video></video>
  </div>

I guess you can fix that with <par> and mediaGroup however.

Best regards,

Brian

Received on Monday, 6 August 2012 01:08:22 UTC