为什么< video>从DOM中删除时停止播放，而仍然可以分离播放吗？ [英] Why does a <video> stop playing when removed from the DOM, while it can still play detached?

问题描述

我正在研究一个自定义组件，偶然发现了这种奇怪的行为。基本上，可以根本不向DOM添加< video> 元素来播放视频文件。

I was working on a custom component and stumbled upon this strange behavior. Basically, it is possible to play a video file without adding a <video> element to the DOM at all.

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树中并随后将其删除，则视频会自动暂停（！）

Anyway, if at some point the element is added to the DOM tree and subsequently removed, then the video pauses automatically (!)

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> 元素。

The same considerations apply to <audio> elements, too.

我在这里有两个问题：

I have two questions here:

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

1. What part of the specification indicates that when a video element is removed from the DOM then it should stop playing?

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

What is the rationale for allowing detached videos to play but stopping videos when they are removed from the DOM tree? This is the part that surprises me most. If there is a use case for playing detached videos on a page, then why would subsequently detaching a video stop playback? On the other hand, if a detached video is stopped because there is no reason to keep playing it, then why allow it to start detached in first place?

推荐答案

规范令人困惑。首先它说：

The specification is confusing. First it says:

可能正在播放的媒体元素 不在文件中 时，不得播放任何视频，但应该播放任何音频组件。媒体元素不能仅仅因为对它们的所有引用已被删除而停止播放；仅当媒体元素处于无法再播放该音频的状态时，该元素才可能被垃圾回收。

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中删除应该会停止视频，但是音频应该继续。

If I understand this correctly, removing the element from the DOM should stop the video, but the audio should continue.

但是后来它说：

当媒体元素为从文档中删除后，用户代理必须运行以下步骤：

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

1. 等待稳定状态，从而允许删除文档的任务媒体元素从文档继续。同步部分由该算法的所有其余步骤组成。 （同步部分中的步骤用marked标记。）

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

⌛如果介质元素在文档中，请返回。

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

⌛运行media元素的内部暂停步骤。

⌛ Run the internal pause steps for the media element.

第3步表示要暂停媒体。

Step 3 says to pause the media.

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

Step 2 seems redundant -- how can the element be in a document if it's being removed from the document? But step 1 could add it back to the document (or a different document). That's why it requires waiting for a stable state (which is why you needed to use setTimeout() in your example).

I认为第二个引用优先。因为在运行暂停步骤时，该元素不再潜在地播放。

I think the second quote takes precedence, because when the pause steps are run, the element is no longer "potentially playing".

这篇关于为什么< video>从DOM中删除时停止播放，而仍然可以分离播放吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！