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

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