When does a video element created with document.createElement get garbage collected if played without appending it to the page?

Question

Say I create a video and play it like so:

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

On chrome, this causes the video to play, except without the element actually existing in the DOM.

At what point will that video get garbage collected?

Additionally, how would garbage collection work if within createVideo() we run video.pause() before returning the video element? Would the video element stick around as a zombie forever?

Answer 1

This seems to be answered in the spec: https://dev.w3.org/html5/pf-summary/video.html

Media elements that are potentially playing while not in a Document must not play any video, but should play any audio component. Media elements must not stop playing just because all references to them have been removed; only once a media element to which no references exist has reached a point where no further audio remains to be played for that element (e.g. because the element is paused, or because the end of the clip has been reached, or because its playbackRate is 0.0) may the element be garbage collected.