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

Thanks all, it already has been a great day of feedbacks, in and off the
list! I'm very thankful for your time.


The initial idea disregards that videos should support different languages
> for subtitles.
>

Good point. The thing is that we need to reverse our point of view a little
here: the HTML document *is* the subtitles. So it works just like an
article on an HTML page, you would have multiple pages for multiple
languages:

example.com/fr/mydocumentary
example.com/en/mydocumentary

Using the standard mechanism to detect languages preferences as needed.

Feels somehow more web-like than having a single URL that would load every
subtitles from a series of external resource files. (I love one resource =
one url)



> 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";
> }
>

You are totally right! I'm drafting for Brian Kardell that very kindly
offered to implement a Hitchjs plug-in, and your way is much cleaner.
Probably something like :media-time(0-2352), with ms being the standard
unit.

What would be the most standard separator for two value in CSS?



> 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.
>

No, you are right, it's not covered.
Track is specifically for basic text, and more specifically a way to bring
the traditionally built subtitle files to use. Webvtt if I remember well
(read the specs months ago) is even specifically built to be most
compatible with old subtitles formats.
It's a very important goal, but not the endgame.



> So allowing to style the video depending on time using CSS would give more
> flexibility.
>

I'm pretty sure it would, and not only for subtitles. You could do things
like:

 * style your video to black and white at specific moments, without going
back to the editing station
 * make audio slideshows without Javascript, and with a very simple CSS
syntax
 * easily super-impose "hot-zones" div on videos, making clickable
interactive videos (again, without complicated/proprietary model in
javascript)
 * etc.

Why a pseudo-class in the line of hover, selected etc.? Because with a
video or audio element, the user can actually scroll and rewind, fast
forward.
So media time is very frequently a user action, not just a straight
timeline.
It would be in the spirit of other pseudo-class.


   .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.


I think François meant the addition of a new timecode source when calling
an animation. Full code would be in my own case:

--- Markup ---
  <video id="myvideo"><source src="video.ogv" type="video/ogv" /></video>

  <a rel="dc:source" hreflang="en" property="subtitle"
href="video.mp4#t=0:00:00.099,0:00:04.350"
data-time="0:00:00.099,0:00:04.350">Hi, I’m julien dorra, and this is a
presentation of MetaFragments</a>

--- CSS ---
@keyframes "appear" {
0% {visibility: visible; top: 0%;left: 0%;}
 100% {visibility: visible;  top: 0%; left: 0%;}}

a[data-time="0:00:00.099,0:00:04.350"] {
  animation-time-source: url(#myvideo);
  animation-name    : appear;
  animation-duration: 4251ms;
  animation-delay   : 99ms;}

So instead of launching the animation when the page is loaded since 99ms,
it would launch the animation when the video is reaching 99ms

That would be a great direction to explore. Today you can only animate in
relation to the time since the page loaded, and that is not always the best
reference point.

One limitation is that not all CSS properties are animable:
http://oli.jp/2010/css-animatable-properties/

Also, I'm not sure how prepared to rewind & fast forward of time is the
Animation spec! Probably the whole animation spec would need some
re-examination.

In my case a new timecode source for animation would be quite enough, as I
fully use animations and I stuck to animable properties.

But there is a wide range of CSS coders, from the self-taught beginner to
the ninja. A media-time() pseudo-class would help the *non-ninja* do nice
things with Videos more easily.

The syntax is simple enough that beginners as well as gurus could use it to
synchronize styles and media elements together.

It would cover non-animable properties, and it would cover simpler use
cases where an animation is inappropriate.


PS: In any case, it's obvious that we'll see more and more things around
time-based media now that VIDEO and AUDIO are put to good use, and that's
good to see those needs discussed.


Julien