demo · v133
Audio keepalive across reparent
A playing <audio> element reparented two ways: the legacy appendChild path (audio drops to silence) and the new moveBefore path (playback continues, current time unchanged). The classic mini-player-into-fullscreen pattern, now without a reload tax.
moveBefore isn't available. Chrome 133+ required.slot A
now playing
slot B
last move
currentTime before
currentTime after
delta (state loss)
—currentTime before
—currentTime after
—delta (state loss)
—
why
Many designs want to swap a media element between “docked” and “floating” containers as the layout changes. Before moveBefore, the only way to relocate an element was to detach + reattach it, which is equivalent to re-creating the underlying media pipeline — playback stops, time resets, network reconnects. moveBefore moves the element in tree order without ever leaving the document, so its media graph, animation timeline, focus, and requestAnimationFrame callbacks all stay alive.
// state preserved: playback, focus, animations, iframe doc
slotB.moveBefore(player, null);
// state lost: each of the above resets
slotB.appendChild(player);