search

w3c / picture-in-picture

Picture-in-Picture (PiP)
https://w3c.github.io/picture-in-picture
Other
310 stars 39 forks source link

CSS-styling vs. respecting <video> element styles for PiP (Firefox → the latter, Webkit → ??) #215

Closed Philzen closed 1 year ago

Philzen commented 2 years ago

Currently the standard says::

Styles applied to video (such as opacity, visibility, transform, etc.) MUST NOT apply in the Picture-in-Picture window. Its aspect ratio is based on the video size.

However, Firefox does that (which is good for our use case), while WebKit (Chromium) does not, and for some reason it seems impossible to style the PiP-window using the CSS pseudo class, despite the MDN stating that it should be supported.

Maybe it would be good to allow certain styles? Or clarify in that sentence, that if PiP is implemented, the :picture-in-picture-class also would need full support. Or otherwise, kindly advise where to best report these inconsistencies

Background: I'm working on a video conferencing project, where you have the common setting to mirror your own, self-facing video stream. The component we're using does this using transform: rotateY(180deg. This setting on the <video>element is currently applied to Firefox PiP as well (also scaleX(-1), which achieves the same – however rotating to other values than 180deg or scaling to other values than -1 is ignored), but in WebKit all styles on the video-element are ignored when going into PiP and the stream flips back to normal. Also, i couldn't achieve anything using the :picture-in-picture pseudo class.

beaufortfrancois commented 1 year ago

In Chromium-based browsers, it is possible to create a PiP window based on a video capturing a canvas stream. See https://developer.chrome.com/blog/watch-video-using-picture-in-picture/#show-canvas-element-in-picture-in-picture-window and https://googlechrome.github.io/samples/picture-in-picture/audio-playlist

Note that a dedicated WICG Document Picture-in-Picture API has been proposed to solve these kinds of issues as well.