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