View Transitions & 播放视频
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:
前几天我在关于 View Transitions 的对话中大放厥词，我相信我说过你可以在 View Transition 期间保持音频和视频播放。现在我坐下来实际证明一下，答案似乎更微妙：
- Same-Page View Transitions: Just Works™
- Same-Page View Transitions：Just Works™
- Multi-Page View Transitions: Doesn’t Work… well… you can fake it though.
- Multi-Page View Transitions：不起作用…… 嗯…… 不过你可以伪造它。
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.
让我们从第一个开始，因为它简单且令人满意。但首先 这里有一个演示两者。我想在这里嵌入演示，但多页面视图转换在嵌入中表现不佳，不知何故。所以与其让你试试然后困惑或失望，不如直接去上面的那个演示链接。
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().
如果你在页面上有 <video> 元素，并且使用 document.startViewTransition 在回调中以某种方式操纵它，它会在过渡期间保留视频的状态。如果视频正在播放，那个播放状态会整个时间都保留。很像 新的 .moveBefore()。
doViewTransition.addEventListener("click", () => { document.startViewTransition(() => { const $video = document.querySelector("video"); $video.classList.toggle("fancy"); }); });Code language: JavaScript (javascript)
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>.
基本上没什么复杂的。这在 <audio> 或 <iframe> 上同样有效。
The brass tacks here are that when a page unloads and a new page loads, no state at all is m...