Is it possible to move a <video> element in the DOM without resetting it?
Unfortunately not. The DOM doesn't really have a concept of move, you just have to detach and reattach. As soon as the DOM node is no longer rooted in a document, it loses its playing state.
You may be able to preserve it somewhat by storing it in JS and re-applying it, but that will probably introduce a little skipping.
As per a workaround, here's the code snippet that worked for me:
function beforeDOMMove() {
if (video.paused) {
const currentTime = video.currentTime
const canPlayListener = () => {
video.removeEventListener('canplay', canPlayListener)
video.currentTime = currentTime
video.play()
}
video.addEventListener('canplay', canPlayListener)
}
}