使用document.createElement创建的视频元素何时播放，如果播放时没有将其附加到页面？

Posted 2021-03-29

假设我创建一个视频并像这样播放：

async function createVideo() {
    const videoEl = document.createElement("video");
    videoEl.autoplay = true;
    videoEl.src = "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4";

    await videoEl.play()
    return videoEl
}

createVideo()
    .then(() => console.log('video is playing'))
    .catch(error => console.log(error))

在chrome上，这会导致视频播放，除非DOM中没有实际存在的元素。

该视频将在什么时候收集垃圾？

另外，如果在createVideo()中我们在返回视频元素之前运行video.pause()，垃圾收集将如何工作？视频元素会永远留在僵尸身边吗？

答案

这似乎在规范中得到了回答：https://dev.w3.org/html5/pf-summary/video.html

不在文档中可能播放的媒体元素不得播放任何视频，但应播放任何音频组件。媒体元素不能因为删除了对它们的所有引用而停止播放;只有一个没有引用的媒体元素已经达到了一个点，其中没有剩余的音频要为该元素播放（例如因为元素被暂停，或者因为已经到达剪辑的结尾，或者因为其playbackRate是0.0 ）可以将元素垃圾收集。