javascript - 为什么 从 DOM 中移除后停止播放，而它仍然可以分离播放？

Question

我在开发自定义组件时偶然发现了这种奇怪的行为。基本上，可以在不添加 <video> 的情况下播放视频文件。元素添加到 DOM。

const video = document.createElement('video');
video.src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c6/Video_2017-03-19_23-01-33.webm/Video_2017-03-19_23-01-33.webm.480p.webm";

function start()
{
    if (video.paused)
    {
        video.play();
        console.log('paused', video.paused);
    }
}

<div><button onclick='start()'>Start</button></div>

无论如何，如果元素在某个时候被添加到 DOM 树中并随后被删除，那么视频暂停会自动 (!)

const video = document.createElement('video');
video.src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c6/Video_2017-03-19_23-01-33.webm/Video_2017-03-19_23-01-33.webm.480p.webm";

function start()
{
    if (video.paused)
    {
        video.play().then(
            () =>
            setTimeout(
                () =>
                {
                    document.body.removeChild(video);
                    setTimeout(() => console.log('paused after', video.paused), 0);
                },
                3000
            )
        );
        document.body.appendChild(video);
        console.log('paused before', video.paused);
    }
}

<div><button onclick='start()'>Start</button></div>

同样的考虑适用于 <audio>元素也是。

这里有两个问题:

1. 规范的哪一部分表明当视频元素从 DOM 中移除时它应该停止播放？

2. 允许播放分离的视频但在从 DOM 树中删除视频时停止播放的理由是什么？这是最让我惊讶的部分。如果有在页面上播放分离视频的用例，那么为什么随后分离视频会停止播放？另一方面，如果一个分离的视频因为没有理由继续播放而停止，那么为什么允许它首先开始分离？

Answer 1

specification令人困惑。首先它说:

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 is in a state where no further audio could ever be played by that element may the element be garbage collected.

如果我理解正确，从 DOM 中删除该元素应该会停止播放视频，但音频应该会继续播放。

但后来它说:

When a media element is removed from a Document, the user agent must run the following steps:

1. Await a stable state, allowing the task that removed the media element from the Document to continue. The synchronous section consists of all the remaining steps of this algorithm. (Steps in the synchronous section are marked with ⌛.)

2. ⌛ If the media element is in a document, return.

3. ⌛ Run the internal pause steps for the media element.

第 3 步说要暂停媒体。

步骤 2 似乎是多余的——如果元素从文档中删除，它怎么会在文档中呢？但是第 1 步可以将其添加回文档(或其他文档)。这就是它需要等待稳定状态的原因(这就是为什么您需要在示例中使用 setTimeout() 的原因)。

我认为第二个引号优先，因为当运行暂停步骤时，该元素不再“可能正在播放”。