Re: [css3-animations] time sources, videos and storyboards

I've seen many occasions where people propose to have support for
'display:block/none' in keyframes. I have written several emails about it
as well and agree that this would be very nice to have, not just for video
but also for animations.

There hasn't been much response. One of the issues is what
'getcomputedstyle' would return when a parameter such as 'display' is not
interpolable.

Rik

On Tue, Jul 31, 2012 at 8:51 AM, François REMY <fremycompany_pub@yahoo.fr>wrote:

>   *<for new-comers: this thread is about syncing videos and css
> animations>*
>
> Indeed, I think the :time() proposal would be something looking like what
> you included in your mail. However, I don’t think this proposal will go
> anywhere as it suffers from at least one big issue: you can’t target any
> element on the page based on a video timing, since that element needs to be
> “after” the targeted video in the CSS sense of the term for the selector to
> target it. Also, adding generated content to video::after is not guarenteed
> to work since video tags are replaced elemens.
>
>
>
> I see better hope for a animation-syncing behaviors based on time sources.
> Here’s a more comprehensive example of what it could look like:
>
>
> *HTML:*
> <div class=”my-video-overlay” style=”animation-delay: 0s;
> animation-duration: 15s;”>...</div>
> <div class=”my-video-overlay” style=”animation-delay: 543s;
> animation-duration: 15s;”>...</div>
> <video id=”my-video”>...</video>
>
> *CSS:*
> .my-video-overlay {
>     display: none;    animation-name: show;   animation-time-source:
> url(#my-video);
>     ... position ...
> }
>
> @keyframes show {
>     from { opacity: 0; display: block; }
>     10 % { opacity: 1; }
>     90 % { opacity: 1; }
>     to      { opacity: 0; display: none; }
> }
>
> During the 15 first seconds of the video, the first overlay would be
> displayed and would be hidden after that. During the 15 last seconds, the
> second overlay would. If the user rewinds back in time or skip to another
> location of the video, the time would rewind at the same pace as the video,
> keeping them always in sync.
>
> From an implementation perspective, the only difference is that the time
> used in the easing functions is not the system time but the time defined by
> a video element. Also, it’s possible to go back in time so that may have an
> effect on implementations.
>
>
>
> Later in time, I could also envision things like storyboards, to make
> things a bit easier:
>
>
> *CSS:*
> @storyboard my-video-overlays {
>
>     time-source: url(#my-video);
>
>     */* initial state */*
>     from {
>         #first-overlay { opacity: 0; display: none; }
>         #second-overlay { opacity: 0; display: none; }
>     }
>
>     */* storyboard for first overlay, overrides initial state */*
>     0s {
>         #first-overlay { opacity: 0; display: block; }
>     }
>     1s {
>         #first-overlay { opacity: 1 }
>     }
>     14s {
>         #first-overlay { opacity: 1 }
>     }
>     15s {
>         #first-overlay { opacity: 0; display: none; }
>     }
>
>     */* storyboard for the second overlay */*
>     to - 15s { ... }
>     to - 14s { ... }
>     to - 1s { ... }
>     to { ... }
>
>     */* final state */*
>     to {
>         #first-overlay { opacity: 0; display: none; }
>         #second-overlay { opacity: 0; display: none; }
>     }
>
> }
>
> If you add this to generated boxes (slots), you could entirely describe
> video subtitles and overlays in unobstruive CSS that could be referenced in
> the <track /> element of the VIDEO tag (so that users could enable/disable
> overlays using their usual UI).
>
>
>
>   *From:* Sebastian Zartner <sebastianzartner@gmail.com>
> *Sent:* Tuesday, July 31, 2012 2:28 PM
> *To:* François REMY <fremycompany_pub@yahoo.fr>
> *Cc:* Julien Dorra <juliendorra@juliendorra.com> ; www-style@w3.org
> *Subject:* Re: a :time pseudo-class for media elements (and examples on
> how it would be useful and generic)
>  The initial idea disregards that videos should support different
> languages for subtitles. Also I don't see a :time pseudo-class but only
> some numeric "pseudo-classes".
> When reading about such a pseudo-class I imagine something like this:
>
> #myVideo:time(23.48s-28.12)::after {
>   content: "I love this part of the video";
> }
>
> Another use case would be to show a popup with info to the video or a link
> to a similar video at a specific time.
> By skimming through the MSDN article I don't believe that's covered by the
> <track> tag.
> So allowing to style the video depending on time using CSS would give more
> flexibility.
>
>     .video-related {
>>         animation-time-source: url(#videoID);
>>     }
>>
> François, could you elaborate on that? I don't seem to get where the
> relation to the time is defined.
>
> Sebastian
>