Open jridgewell opened 3 years ago
I agree that it makes sense to tie this to content-visibility
, because content-visibility
already pauses similar work such as CSS animations of content, as well as the update-the-rendering loop of embedded iframes (see step 7 here).
Therefore it also makes sense to pause videos, in order to improve performance in that area related to content the user can't see.
Automatically pausing the video and resuming it when it becomes visible again is another benefit of this change. Note also the parallel with pausing CSS animations mentioned above.
Finally, I'll note that, as I understand it, web compatibility requires hidden videos in other circumstances such as being detached from the DOM, or possibly under visibility: hidden
or display:none
ancestors, in particular ones that play audio, to continue playing. I don't think this compatibility problem will be an impediment to making the change for content-visibility
because content-visibility
is a relatively new CSS property.
@dalecurtis
Since this is limited to a relatively new tag, I don't have any objections to this. We might even consider not loading media elements that start invisible, but pausing / preventing autoplay is sufficient to allow a significant amount of resource reclamation.
While Safari and Firefox don't (yet?) ship content-visibility, @jernoble @alastor0325 who may have thoughts.
The scenario described in the comment0 sounds reasonable to me. But shouldn't we apply that to all iframes (not only for cross-origin) and all playback (also for audio)?
But shouldn't we apply that to all iframes (not only for cross-origin)
Yes, please. My use-case was just to highlight that I can't directly access the <video>
inside the iframe to force a pause (since it's cross-origin). I think likely apply to any descendant trees (eg, hiding the <div>
in <div><video/></div>
), and all iframes.
all playback (also for audio)?
Possibly yes (and this would help us). I think it's a very clear example that content-visibility
should affect a <video>
because it's visual. It's a little iffy if it should affect an <audio>
, but I don't think it would be bad to do so.
You could argue the same about plain visibility: hidden
or what not, right? It feels a bit sketchy that CSS affects media playback.
You could argue the same about plain
visibility: hidden
or what not, right?
Yes, but two points:
It feels a bit sketchy that CSS affects media playback.
I think you could argue both ways - it also seems odd, or at least unexpected, that an invisible video keeps "playing".
The CSS Working Group just discussed Pause media playback in iframes hidden by content-visibility:hidden
, and agreed to the following:
RESOLVED: conceptually play (invisibly and muted) any media playback for things that are skipped due to content-visibility, skipping any events unless queried (as for animations)
https://drafts.csswg.org/css-contain/#content-visibility
We have a use case where we would like the ability to pause playback of video when we mark a cross-origin
<iframe>
as beingcontent-visibility: hidden
.Eg, we include an iframe to youtube video, which the user then plays. After playing, the user becomes disinterested and scrolls on to the rest of the document. After the users is far enough away, we manually mark youtube iframe with
content-visibility: hidden
. Ideally, this would pause the playback so it's no longer taking resources, audio would stop playing, and the state would be paused. If the user were to scroll back to the youtube iframe, they'd find it in the paused state at the exact point they scrolled away.In order to achieve this currently, we actually remove the entire iframe from the document. This guarantees the media will stop playback, but it also loses the current track position. If the user scrolls back to the the youtube iframe, they'll find it reset to the 0s mark, which isn't a great experience for them.
/cc @chrishtr