- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 02 Aug 2012 00:13:13 +1000
- To: François REMY <fremycompany_pub@yahoo.fr>
- CC: Sebastian Zartner <sebastianzartner@gmail.com>, Julien Dorra <juliendorra@juliendorra.com>, www-style@w3.org
On 1/08/2012 1:51 AM, François REMY wrote:
> 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).
I supported this type of timing function last year in May [1] and June
[2]. It came from Andrew Fedoniouk's concept of a storyboard (group
transitions) [3].
1. http://lists.w3.org/Archives/Public/www-style/2011May/0554.html
2. http://lists.w3.org/Archives/Public/www-style/2011Jun/0084.html
3. http://lists.w3.org/Archives/Public/www-style/2011Apr/0548.html
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 1 August 2012 14:13:49 UTC