[css3-animations] time sources, videos and storyboards

<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 
Sent: Tuesday, July 31, 2012 2:28 PM
To: François REMY 
Cc: Julien Dorra ; 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