1841780 - Media controls popup get stuck, when the media is no longer displayed

Status: UNCONFIRMED

(Toolkit :: Video/Audio Controls, defect, P3)

Description

[Marcelektro]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Steps to reproduce:

Using Firefox on Windows 10, I encountered an issue while playing embedded media in iframes, such as a YouTube videos.

To reproduce the issue:

• Open any embedded media on any website. Can be a Youtube video on Discord, or my reproduction .html website: https://gist.github.com/Marcelektro/031c083fd1dba6f803a48072ad806be0
• Play the embedded Youtube video
• Remove the iframe element or reload the page. (On Discord, switch the channel to any other one). Then, use mediakeys to change the volume or pause it.

Actual results:

After the embed gets removed, the media playback controls and video details remain visible next to the volume slider. The playback button appears to be in a "playing" state, even though the video is not playing.
When I attempt to pause the video by clicking the button, it "pauses" briefly for approximately 1 second, but then automatically "resumes" playing (just the button, video doesn't play).

Reloading the page does not help. After it reloads, the issue persists.
Closing the tab fixes it however. Then after reopening the website, it no longer appears.

A video of the issue:
https://youtu.be/BFYkAgWjwcA

Expected results:

Upon removal of the embedded iframe, or reloading the page, the media keys and associated video details should no longer be displayed in that popup.
The playback button should accurately reflect the video's actual state.

A video of how it functions properly:
https://youtu.be/QU-OdbRTyLo

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.