popover: should audio/video in a popover keep playing after popover is dismissed?

[xiaochengh]

(Originally filed as a Chrome bug)

Right now allowing playback in display: none seems to be an intended behavior, so dismissing a popover doesn't change playback status, and A/V will keep playing.

On the other hand, this behavior can be confusing to some people.

I don't have an opinion here, just filing this issue to discuss what the correct behavior should be.

[keithamus]

/cc @josepharhar who was looking into this.

[josepharhar]

I don't think this is specific to popovers. What about dialogs? What happens when you disconnect a video or audio element from the document?

display:none is how we decided to make popovers be in a closed state, and we are inheriting all of the behaviors that come along with that. Should we otherwise emulate different behavior from display:none, like how things behave when disconnecting from the document? What do iframes do when they are display:none vs disconnected?

[lukewarlow]

I wonder if instead of changing popovers behaviour this should be an attribute (pausewhenhidden?) on video/audio elements so the solution is agnostic of whether it's popover, dialog or futureelement. This way it's also opt-in.

[brucelawson]

After I wrote https://brucelawson.co.uk/2023/html-popover-videos-display-blackhole/, @zcorpan suggested "Maybe an attribute autopause which pauses when the element becomes invisible (either by display or scroll out of view)?" - which would work for me. (Would it be too weird for autopause to be considered true if absent from the markup, and over-rideable with autopause="false" for those who want audio to continue?)

[keithamus]

I've raised #9793 where we can discuss the addition of autopause.

[brucelawson]

Thinking further about autopause, this wouldn't necessarily solve my use case. I'm iframing a video from YouTube (but could be vimeo, or soundcloud, or bandcamp, or any number of other similar services) so don't have access to the underlying media element.

[josepharhar]

Are cross-origin iframes supposed to be capable of knowing when their parent frame set them to display:none? If not, I'm not sure that we can make this work.

[annevk]

I think they can with an IntersectionObserver, no?

[jernoble]

I don't think this is specific to popovers. What about dialogs? What happens when you disconnect a video or audio element from the document?

When you remove a <video> or <audio> element from the DOM, the HTML spec has the UA pause. Search for "When a media element is removed from a Document, the user agent must run the following steps:".

In #9793, it's been proposed to add a "autopause" attribute to media elements (and perhaps a similar property to <iframe>s to handle the potentially more common case of embedded media player. But I would flip that argument; the desirable behavior would be to always pause playback of media elements inside a <dialog> or popover when they are dismissed.

The behavior specified for "when you remove a media element from the DOM" is there because removing a playing <video> or <audio> element also removes the user's ability to pause playback. That is also true for dismissed <dialog> or popover elements, and that those elements remain in the DOM is merely a implementation detail, and not a user expectation.

[basher]

I think they can with an IntersectionObserver, no?

I've used a MutationObserver in my UI boilerplate to "fix" the issue with embedded videos.

Example video player which uses <dialog>:
https://basher.github.io/Web-UI-Boilerplate/?path=/story/components-video-player--video-player

JS code:
https://github.com/basher/Web-UI-Boilerplate/blob/master/ui/src/javascript/modules/video-player.ts#L69

It caters for browsers that support lazy loading iframes, and ones that don't.

[zcorpan]

To be able to undo the pause (with script), we need to make sure the the scheduling of the pausing is the same as the closing/hiding of the popover. Otherwise the audio could have an interruption if e.g. the popover is hidden and the audio is paused in separate tasks.