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:<\/p>\n\n\n\n
Let’s start with that first one as it’s easy and satisfying. But first here’s both in a demo<\/a>. 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.<\/p>\n\n\n\n If you have a Basically nothing to it. This works just as well on an Same-Page View Transitions and Video<\/h2>\n\n\n\n
<video><\/code> element on the page and you use a document.startViewTransition<\/code> 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()<\/code><\/a>.<\/p>\n\n\ndoViewTransition.addEventListener(\"click\"<\/span>, () => {\n document<\/span>.startViewTransition(()<\/span> =><\/span> {\n const<\/span> $video = document<\/span>.querySelector(\"video\"<\/span>);\n $video.classList.toggle(\"fancy\"<\/span>);\n });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n<audio><\/code> or <iframe><\/code>. <\/p>\n\n\n\n\t\t