是否可以在DOM中移动<video>元素而不重置它？</video>

Question

我想在我的DOM中创建一个<video>元素，然后将其移动到另一个位置，而不会中断该内容的播放。

也许更广泛地说，是否可以在不中断附加事件的情况下移动任何 DOM元素？

有些方法包括使用CSS绝对定位，但有没有办法以不中断播放的方式实际更新DOM？

Answer 1

不幸的是没有。 DOM实际上没有移动的概念，你只需要分离和重新连接。一旦DOM节点不再以文档为根，它就会失去其播放状态。

您可以通过将其存储在JS中并重新应用它来保留它，但这可能会引入一些跳过。

Answer 2

根据解决方法，这是对我有用的代码段：

function beforeDOMMove() {
   if (video.paused) {
      const currentTime = video.currentTime
      const canPlayListener = () => {
         video.removeEventListener('canplay', canPlayListener)
         video.currentTime = currentTime
         video.play()
      }
      video.addEventListener('canplay', canPlayListener)
   }
}