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)
   }
}

Tags:

Html

Dom