View Transitions & Playing Video

I was runnin’ my mouth the other day in a conversation about View Transitions and I believe I said that you can keep audio & video playing during a View Transition. Now that I’m sitting down to actually prove it, the answer seems to be more nuanced:

• Same-Page View Transitions: Just Works™
• Multi-Page View Transitions: Doesn’t Work… well… you can fake it though.

Let’s start with that first one as it’s easy and satisfying. But first here’s both in a demo. I would embed the demo here, but I find that multi-page view transitions don’t behave well in the embed for whatever reason. So rather than you try it and be confused or disappointed, just go directly to that demo link above.

Same-Page View Transitions and Video

If you have a <video> element on the page and you use a document.startViewTransition that manipulates it somehow in the callback, it will preserve the state of the video during the transition. If the video is playing, that playing state will be preserved the entire time. Much like the newangled .moveBefore().

doViewTransition.addEventListener("click", () => {
    document.startViewTransition(() => {
      const $video = document.querySelector("video");
      $video.classList.toggle("fancy");
    });
});Code language: JavaScript (javascript)

Basically nothing to it. This works just as well on an <audio> or <iframe>.

Multi-Page View Transitions and Video

The brass tacks here are that when a page unloads and a new page loads, no state at all is maintained. Even if the exact same <video> is on the next page, it’s not going to remember that’s playing or where you were.

I was just wrong when I was thinking there was some way to get this to work. There are some understandable sources for the confusion, though. If someone happened to be using an framework that provides SPA (single page app) navigations, you might see persisting video just because, well, the page never unloads. Also: Astro is a popular framework that specifically implemented persistent transitions for video, and does so by essentially forcing an SPA experience with a same-page view transition.

This GitHub thread is a feature request for multi-page view transitions to be able to keep state and gets into this a little. Bramus notes that this isn’t a view transitions specific feature, it’s a more general need for state-saving through page navigations. It also links to this demo, which… makes it work! This is the “faking it” I referred to. It doesn’t prevent the <video> from being unloaded and re-loaded, it just keeps the state in sessionStorage. So there is a little blip between pages. But hey it’s pretty close!

Here’s the important bits…

/* Enable Multi-Page View Transitions */
@view-transition {
  navigation: auto;
}

/* Ensure video has a unique name shared on both pages */
video {
  view-transition-name: video;
}Code language: CSS (css)

<!-- regular link goes between pages */
<a href="./another-page.html">
  Go to Another Page (Multi-Page View Transition)
</a>

<!-- video exists on both pages -->
<video src="https://assets.codepen.io/3/mov_bbb.mp4" controls></video>Code language: HTML, XML (xml)

window.addEventListener("pageswap", async (e) => {
  if (e.viewTransition) {
    // page is leaving... save the video state
  }
});

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // page is entering, get video state and restore
  }
});Code language: JavaScript (javascript)

Here’s a video where I’m navigating pages in the demo and you can see it working, and I’ve recorded the system audio along with it so you can hear the “blip” happen between pages:

Again, this demo is adapted from this demo from the Chrome gang. I’m posting mine because I was learning about it and playing with it and hope to make this all more findable information.

We’ve only looked at <video> specifically here, but if you were OK with the “blip” thing and wanted to do this with, say, a YouTube video that embeds as an <iframe>, the techniques would be the same, you’d just need to dig out the video information with the Iframe Player API in order to save and retrieve the playing video information. I think that makes pretty fun homework if you ask me. 😉