Menu
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?
586
To move element in the DOM in JavaScript, we can use the before and after methods. const div1 = document. getElementById("div1"); const div2 = document.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.
In plain JavaScript, you can use the appendChild() method to move the existing source element in the document to the target element.
Just put your src to null. It will remove your video src attribute. Done.
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.
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
