[web-animations-2][css-animations-2] Allow controlling video playback via an animation timeline

[flackr]

Similar to #9110, authors often want the ability to drive videos by animation timelines. See #11587 and #6861 (comment).

We'll need to figure out the details, but this could be something like

document.querySelector('#my-video').timeline = new ViewTimeline(...);

Possibly also with css support, e.g.:

#my-video {
  video-timeline: view();
}

[birtles]

For what it's worth, when we designed the Web Animations API, the intention was that driving video playback would happen via different types of effects and you'd synchronize it with other animations via group effects.

[ydaniv]

For what it's worth, when we designed the Web Animations API, the intention was that driving video playback would happen via different types of effects and you'd synchronize it with other animations via group effects.

Yeah, that would be a more coherent method.
If we consider a new VideoEffect that can take a <video> as target and put in side an Animation that takes a timeline and ranges. Then we can reason about synching that animation with others using group effects.

I suppose if we have video-timeline we also need to consider video-range.
But OTOH, we don't really need all the other animation-* properties.

So, how would a declarative API look like? It seems to me that all we need here is -timeline and -range. So that could be the declarative syntax, while the WAAPI side could be a new type of VideoEffect.

WDYT?

[SebastianZ]

I suppose if we have video-timeline we also need to consider video-range. But OTOH, we don't really need all the other animation-* properties.

I can see possible use cases for some other animation-* properties. E.g. @flackr mentioned video-play-state which could possibly also be covered using animation-play-state. For seconds-long videos used in chats you often see them repeated a few times before they stop, which would be covered by animation-iteration-count. animation-duration could influence the video duration. And animation-direction could influence whether the video is played forwards or backwards.

Sebastian