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

Hi Tab, thanks for jumping in!

First, a lot have evolved in just a few days. I corrected the most blatant
errors, and together with Brian Kardell, we drafted some description:
https://docs.google.com/document/d/11UCIy5NmaZsAluWfcwBw7H-m2MWdQjkyna15rMDH3LI/edit#
(Brian is using/refining the description to prepare a shim via a Hitchjs
plugin)

I would be more than thankful if you had the time to read the description
and give your feedback / harsh criticism / or even rolling eyes ;-)


Your overall use-case - subtitling videos without using JS - is
> addressed well by <track> and WebVTT.  The feature set for WebVTT was
> developed by looking at lots of examples of actual subtitles in the
> world, so it should be adequate for most things.  You're right that it
> doesn't allow links or images, though.
>

AFAIK, track also doesn't allow to *style* the text nodes in the track
depending of where we are in the media timeline.

*For example placing the subtitle in a specific area of the video at a
certain time, or turn a black background on for the Track text for
readablity when we are at a portion where the video is to bright.*

*I see now that I made a big mistake giving the impression subtitles as the
overall use case. Popup with links, Audio slideshows, or Hotzones are as
much overall use cases, depending of where your interest go, as the old
plain text subtitles.*
*
*
*The goal is just that: style a media element (or any element with a
selector expressible relationship to the media element) based on the
current time position in a media element. Not specifically solve the
subtitle problem.*


> If you do need the full power of HTML, as you say, you can do this
> with existing animations.  For example, to do a timed slideshow, just
> use some animatable property to hide everything, create an animation
> that unhides them using that property, then set it on all the slides,
> adjusting animation-delay and animation-duration to control when they
> appear.


I used animations for my Dev Derby "no JS" submission (
https://developer.mozilla.org/en-US/demos/detail/video-subtitles-in-css-accessible-standard-self-co
)

But obviously if the user stop the video, sync is lost.

The interesting thing is that it's by using animations that I felt the need
for a :media-time pseudo-class. I was writing my animations, and though how
that simple pseudo would gave me so much power over when I would apply my
predefined animations.



> However, this only works well when the page is running
> independently - doing it to something smaller in a page that should be
> synced to a video is much more difficult.
>

Yes, you have to use javascript. And when people use javascript, most of
the time the sync information is hidden in some exotic format, at best some
JSON, at worst a custom file.

I don't like that a bit, as I feel not having the sync information clearly
exposed and in a standard impair the advancement of hyper-video and
hyper-audio.



>
>  of the primitives in this model is a sync container that keeps all of
> its synced animations running at the same time, even if one is paused
> or scrubbed.  The MediaController object from HTML (slaves multiple
> videos/audios together) will map into this primitive, for example.
>

That's very cool. And useful. I read the notes on the pad (
https://etherpad.mozilla.org/lIwpKlVNd2, link from Brian Birtles, thanks!)
and it was a bit hard to follow, but I was very happy to see that
discussed. A lot of interesting possibilities there.


>
> This should address your use-case.  You'd slave the video and the
> animation-using subtitling elements together in a sync container (with
> the video as the controller), and it'll Just Work.  If you pause or
> scrub the video timeline, the html will adjust appropriately as well.
> We probably need to make sure it's relatively easy to define nested
> timelines so you can have multiple videos on the page without them
> interfering with each other, but that's it.
>


One limitation is that not all CSS properties are animatable at the moment (
http://oli.jp/2010/css-animatable-properties/ for a nice list of the ones
that are)

Have you some ideas about that? Do you think everything is going to be
animatable in the end?


And a bonus question :-) for you:

One use case I would be curious to hear your though on is applying a filter
to (for example) the first 3 seconds of all videos of class "tutorial" on a
website.

With a :media-time pseudo class, you would just write

*

video.tutorial:media-time(0-3000) {filter: grayscale(100%) sepia(100%);}


*
And you're done.

Don't you think animations and sync container would be overkill in term of
markup and style for that kind of styling? Could you give a quick example
of how you would do it with Sync containers and animations to get a better
feel of how it would work for very simple use cases?


Thanks a lot for your time, again. I'm grateful for the quality and
reactivity of the answers on the list,
Julien