Video Subtitles in CSS: accessible, standard, self-contained
Using standard media fragments URL, CSS3 animations and attribute value selectors to display synchronized video subtitles.
More About This Demo From The Author
This proof-of-concept use the in-HTML MetaFragments convention drafted during the MozNewsLab 2011 to display synchronized subtitles using only CSS3 animations and attribute selectors.
the subtitles are fully contained in the HTML page as standard links pointing to their corresponding part of the video, using standard media fragments URI.
As there is currently no way in pure CSS3 to style time-based elements in relation to their own timeline, if you stop the video manually by using the contextual menu, subtitles will get out of sync. You always have the possibility to reset the sync by starting the video again via a simple link.
The CSS use prefixed selectors, but you can take a look at how much more clean and simple it is with only the official syntax in the non prefixed stylesheet.
These subtitles are totally accessible and retro-compatible. They work even if you can't access or play the video, and they are totally useful if CSS is turned off because they are standard, clickable, readable links.
Timecode is self-contained as both totally standard media fragments URI (direct click-throught not supported on Firefox) and a custom HTML5 data attribute.
Given a properly timed transcript, it's very easy to generate this sort of subtitles. I did it manually using a (powerful) text editor. A script would make thing even easier.
What if we had a :time pseudo-class for media elements?
Below is an example CSS code to illustrate how we could use a :time (ie. position in the media) pseudo-class on VIDEO and AUDIO elements – this is fictionnal code, as the time pseudo-class doesn't exist at the moment.
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.
animation-name : appear;
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
content: "I love this part of the video !";
What would *you* do with a :time pseudo class? Does it makes sense to you? Or are you finding that idea totally absurd? :-)
You can find me on twitter here: http://twitter.com/juliendorra
Get the Source Code
This demo is released under the GPL license.