CODEWITHSUNDEEP
htmldom
Eric Martindale
Eric Martindale

Reputation: 1106

Is it possible to move a <video> element in the DOM without resetting it?

I'd like to create a <video> element within my DOM, and then move it to another position without interrupting the playing of that content.

Perhaps more broadly, is it possible to move any DOM element without disrupting attached events?

Some approaches include using CSS absolute positioning, but is there a way to actually update the DOM in a way that doesn't interrupt the playback?

Upvotes: 7

Views: 2722

Answers (2)

Samuel
Samuel

Reputation: 1421

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

Upvotes: 4

loganfsmyth
loganfsmyth

Reputation: 161487

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.

Upvotes: 5

Related Questions