Add a toggle to trigger Picture-in-Picture to the video element
Categories
(Toolkit :: Video/Audio Controls, enhancement, P1)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox68 | --- | verified |
People
(Reporter: mconley, Assigned: mconley)
References
Details
Attachments
(2 files)
PiP-Label-Specs.jpg
We have a spec that we want to tinker with and see how it feels. What ends up landing here might not be the final iteration - we're going to be tweaking as we go.
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 1•5 years ago
|
||
So originally, I was going to make this toggle part of the videocontrols UAWidget, but it seems like a lot of sites (I'm looking at you Vimeo and Twitch) overlap items on top of a <video> which can intercept clicks.
Opera appears to circumvent this by injecting an actual DOM element onto the page for their toggle:
https://www.screencast.com/t/nIuYYzMbSf
I think for this to work, we should do something similar. Having consulted with bz and mstange, here's what I'm thinking in broad strokes:
-
When <video> elements are detected on the page, PictureInPictureChild is instantiated, and creates an IntersectionObserver for the loaded document. For each detected <video>, we begin observing them for intersections greater than, say, 50%.
-
When a <video> element intersects the viewable region of the page, add a mousemove listener. The mousemove listener should check (probably throttled in an idle callback) what elements are beneath the mousemove event's pageX and pageY coordinates. I'd suggest using document.elementsFromPoint for this, except that this causes layout flushing. So I'm proposing we add an nsIDOMWindowUtils.elementsFromPointWithoutFlushing, since I don't really care about the case where the DOM has been dirtied recently and layout hasn't been updated.
-
If the mouse is over top of any of the <video> elements, create the toggle as anonymous content that can be injected into the page. Position the anonymous content at the correct part of the document.
-
If the mouse ever leaves that <video> element, hide the anonymous content. Re-use that anonymous content any time we hover a <video> element on the page.
I'll need a few things before any of this can be attempted.
- I need a way of detecting when <video> elements are bound to the tree. I'm planning on adding a chrome-only event for that, after the UAWidget stuff is fired.
- I need to add nsIDOMWindowUtils.elementsFromPointWithoutFlushing
- I need to make it so that anonymous content injected via document.insertAnonymousContent can respond to click events
On Monday, I'll file follow-up bugs for those and try to get them started.
|
|
Assignee | |
Comment 2•5 years ago
|
||
Pushed by mconley@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/9c03d5b451e0 Add a toggle to trigger Picture-in-Picture that appears over top of <video> elements. Disabled by default. r=jaws,flod
|
||
Comment 4•5 years ago
|
||
| bugherder | ||
|
||
Comment 5•5 years ago
|
||
Build ID 20190626093633
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
Verified as fixed on the latest Nightly build on Windows 10.
Description
•