[csswg-drafts] Control and coordinate video playback state with css (#11587)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== Control and coordinate video playback state with css ==
There are many sites which pause offscreen videos and unpause them when onscreen. Similarly sometimes the playback of videos is coordinated with animations. What if we could coordinate this without javascript.

Proposal: Add `video-play-state: auto | paused`.
- auto would do what the video was doing before. 
- paused will mean that even if a call is made to play the video (e.g. autoplay) it will be paused at its current time.

This would allow a simple animation to pause offscreen videos:
```css
@keyframes play-onscreen {
  0% { video-play-state: auto; }
}
video {
  /* Play while in view, pause offscreen */
  animation: play-onscreen steps(1);
  animation-timeline: view();
  video-play-state: paused;
}
```

Or similarly, if you had an animation that required the coordination of multiple videos you could make them start playing at the appropriate time in the animation, e.g.

```css
@keyframes play {
  0% { video-play-state: auto; }
  100% { video-play-state: auto; }
}
@keyframes slide-in {
  0% { transform: translateX(100px); opacity: 0; }
}
@keyframes slide-out {
  100% { transform: translateX(-100px); opacity: 0; }
}
video {
  video-play-state: paused;
}
.video1 {
  video-play-state: paused;
  animation: slide-in 1s, play 100s, slide-out 1s 100s;
}
/* Video2 slides in after video1 finishes and plays and then slides out. */
.video2 {
  video-play-state: paused;
  animation: slide-in 1s 100s, play 100s 100s, slide-out 1s 200s;
}
```

We could also consider using video-play-state as an alternative to setting the autoplay attribute, e.g. `video-play-state: playing` could request that the video be playing automatically just as autoplay does.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11587 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 January 2025 15:50:03 UTC