View Transitions & Playing 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"); }); }); Basically nothing to it. This works just as well on an <audio> or <iframe>."

"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."

Same-page view transitions preserve media playback state for video, audio, and iframe elements when document.startViewTransition modifies them. Playing state and playback position are maintained throughout the transition. An example toggles a class on the video inside document.startViewTransition and keeps playback uninterrupted. When a full page unloads and a new page loads, no media state is preserved; identical media elements on the new page will not remember playing state or position. Single-page app frameworks can appear to persist media because the page never unloads. Some frameworks implement persistent transition behavior to emulate media persistence.

Read at Frontendmasters