play() must not fail here: HTMLMediaElement.remove(); el.play()

[WofWca]

https://html.spec.whatwg.org/multipage/media.html#media-playback

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

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.

⌛ Run the internal pause steps for the media element.

POC code:

const v = document.querySelector('video');
v.pause(); // It may already be paused, but ensure it
v.remove();
v.play();

Expected behavior: the element starts playing
Actual behavior: the element doesn't play, v.paused === true.

Workaround: execute v.play() on setTimeout or queueMicrotask.

I understand that we want elements to get paused when they get removed from the DOM, but this pauses them a little while after they get removed.

Suggested, not thoroughly thought through solution: when play() is called, cancel the abovementioned scheduled "pause" task.

There is an MR #7855 that touches this piece of the spec, but it still doesn't address the issue.

For context, I discovered this while working on this MR.

[annevk]

cc @whatwg/media

[foolip]

@WofWca have you found a difference between browsers with your example, or do they all pause?

What you suggest (removing the scheduled task) actually seems like the perfect solution to this, if we were to change the spec.

The "If the media element is in a document" check is there to avoid pausing if the element was moved to another document, so there's already some precedent for "canceling" the pause based on what happens after removing from a document.

@dalecurtis WDYT?

[WofWca]

have you found a difference between browsers with your example, or do they all pause?

Desktop Chromium and Gecko (Firefox) both pause, I didn't check other ones.

[dalecurtis]

Seems reasonable. At first glance I thought this would need to undo a bunch of the load algorithm hijinks, but it just needs to cancel the removed from document timer: https://chromium-review.googlesource.com/c/chromium/src/+/4895097