W3C home > Mailing lists > Public > www-style@w3.org > July 2012

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

From: Julien Dorra <juliendorra@juliendorra.com>
Date: Tue, 31 Jul 2012 13:31:27 +0200
Message-ID: <CALfAofXMstQqsy5c1AoMKeU7bo-F3GDpabP+qvqeNqtzjXu1Mg@mail.gmail.com>
To: www-style@w3.org
Hi, it's Julien, long time reader of the archive, first time poster!

It seems like a :time pseudo class on media elements VIDEO and AUDIO would
allow many interesting use cases, one immediate being subtitling a media
element using only CSS3 animations and HTML.


*Why this idea? There is many ways people do subtitles today on the web:
Flash video, Javascript+JSON, Javascript+external files (sbv), etc. None
are really simple, standardized, or semantic.*

So I played with the idea of pure HTML-CSS subtitles, for the 'no JS'
Mozilla dev derby (a good excuse to divert a couple of hours on it :-)

I ended up with a simple demo,
https://developer.mozilla.org/en-US/demos/detail/video-subtitles-in-css-accessible-standard-self-co

The idea of subtitling only with HTML and CSS has many advantages
(accessible even without video and css support, retro-compatible, timecode
is self-contained as standard media fragments URI, it's easy to generate or
even manually edit)

But one flaw today: if you manually stop the video, you lost sync. Today,
you need to add a little bit of javascript to keep the subtitles in sync if
people stop the video. It's the missing part.


*What if we had a :time pseudo-class for media elements?*

No potential addition of Javascript code would be necessary at all if there
was a CSS pseudo-class selecting a particular time in the VIDEO element.

Below is how we would use the :time pseudo-class:

This code match the A element with the custom data attribute
data-time="0:00:24.200,0:00:24.880" and that is the sibling of a VIDEO
element playing at 24200ms.
An animation named "appear" is applied to the A.That link will appear/be
animated when the video element reach 24200 ms.

video:24200~a[data-time="0:00:24.200,0:00:24.880"] {
animation-name : appear;
animation-duration: 680ms;
animation-delay : 24200ms;
}


Another way to use a :time pseudo class would be to append some content to
the VIDEO element at some point in time. It's less retro-compatible.

video:24200::after {
content: "I love this part of the video";
}

We could do that with audio elements too:

audio:1000::after {
content: "The radio show is starting :-)";
}


Of course if I post here it's because I seek feedback. I might be overly
naive, overlooking many things, and the idea has some bad side effects. So
what do you think about a :time pseudo class? Does it makes sense to you?
Do you see some generic uses that might make it useful?

Thanks all,
Julien
Received on Tuesday, 31 July 2012 11:37:39 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:57 GMT