Skip to Main Content

Full controls on Picture in Picture mode window

by Dmitrii Frolov | Jun 3, 2021 | in General / other
Mozilla developing

[Recreated in Connect: https://connect.mozilla.org/t5/ideas/full-controls-for-picture-in-picture-window/idi-p/103]

Currently PiP window can only offer 3 buttons (4 if you turn on the mute button in config. Additionally it can rewind videos, but you can only do that with arrow buttons.

It would be a lot more intuitive if PiP window provided an interface, similar to default browser video control panel with a few additions

My concept is on the second screenshot, where

  • bottom panel allows you to pause/unpause, seek video, control volume, go fullscreen
  • at the top-left there is a favicon and page(tab) title from where this video is playing. Clicking on it would bring you to that tab, but the PiP window would stay open (for cases, when you need to click something on website js player, etc).
  • at the top-right there are buttons that close this window with bringing you back to the original tab and without

Top elements have some space between them and edges so you are able to use this space to drag the window too (aside from area in the middle). Black bars on the screenshot are a part of video, but for videos without them, top elements, when shown, would have soft shading (to be able to see them).

edited on Mar 2, 2022 by Dmitrii Frolov
Public (12)
You will need to login to post a comment
Kyrodes Jun 5, 2021

Or mirror the interface of the website player in PiP (any overlays of the video player). That way we can have in PiP resources like subtitles, thumbnails over the seek bar and every feature the website implements.

Reply 4

hai nguyen Jun 5, 2021

be able to show subtitles make it complete, tbh

Reply 4

Dmitrii Frolov Jun 5, 2021

That would be ideal, but that would be very hard to implement correctly, since js player can consist of an unknown number of layers, and browser wouldn't know where it's still a player and where is a piece of page.
The other challenge is dragging such window around - js players can have click/drag event handlers everywhere, so dragging the window by its center would either not be possible or would break player's sliders (like progress seeker).
With native browser controls they can at least control that.

Reply 1

Kyrodes 11 months ago

AFAIK Opera does (or used to do) this.

Another idea could be detecting and hijacking the fullscreen button/action and instead of showing the player in fullscreen, show it windowed.

Reply 1

Dmitrii Frolov 11 months ago

Hmm, using fullscreen to grab player makes sense actually, but I can see problems with UI scaling and the fact that you can scroll down in youtube, for example

Reply 0

Reinaldo Franco Jun 5, 2021

I had the same idea, it is excellent

Reply 0

Abir Hasan Himel Jun 5, 2021

Also there should be an option to control how many seconds backward or forward i want the video to go with arrow buttons. Currently it's 15 sec which is not ideal specially for going backwards. There should 5 sec and 10 sec options to choose.

Reply 2

Dmitrii Frolov Jun 5, 2021

Yes, maybe as a config parameter, or change it depending on modificator keys (like → is 15s (default) ctrl+→ is 5s, shift+→ is 30s). By the way, native player actually already can seek by 10sec instead of 15, if you hold ctrl.

Reply 1

Campbell Kerr Jun 8, 2021

It could also be done by percentage - so the skip sizes could be different depending on overall video length. Not sure if this is a smart idea though.

Reply 1

Dmitrii Frolov Jun 8, 2021

Seeking by percentage is probably not, but using 1-0 keys to go to a certain percent of a video (like on youtube) - probably is.

Though I think this comment branch becomes a new different idea - native browser videoplayer enhancements

Reply 2

Pneen 5 months ago

Actually scrolling is done by a percentage! It's very difficult to even understand what they're doing behind the scenes but basically Firefox could do the same for seeking with arrow keys

Reply 0

Pneen 5 months ago

See Bugzilla bug 1666666

Reply 0

igorlogius 11 months ago

Yes please! :)

Reply 0

Kockteil 11 months ago

Let, for beginning, make a wide zone of resizing the window "picture in picture". This is great implemented in EDGE. In the thin zone it is impossible to get the cursor. It is constantly angry.
p.s. sorry, google translate

Reply 0

Kockteil 11 months ago

"4 if you turn on the mute button in config" Where is it? In the settings I did not find this.

Reply 0

Asa Dotzler 10 months ago

Status label added: Open to the community

Reply 0

Rodrigo Fonseca 10 months ago

Picture in picture mode was a big advance, but it still lacks some functions like rewind and fast forward as we have on Prime and Netflix when the videos are being played conventionally.

Enabling the keys on the keyboard to do stuff would be even more interesting. The 'F' key could send the user back to the original tab to watch in full mode again, the navigation keys could fast forward or rewind and the 'M' key could mute the sound, etc.

Subtitles would also be helpful.

Reply 1

Gary Broadbent 10 months ago

Posted in wrong thread.

Reply 0

Jon Siddoway 8 months ago

Status label added: Mozilla considering

Status label removed: Open to the community

Hey all, 

Here with some exciting news…

Your idea has emerged as a top idea in this category and will now be reviewed by the product team at Mozilla. As soon as we have another update on its status, we’ll let you know right here in the comment section.

Stay tuned =)

Reply 2

Ania Mininkova 6 months ago

Hi,
My name is Ania; I'm a product manager on the Firefox Desktop team.

Thank you for submitting the idea and all the votes and comments.

In the near future, we'll be working on the subtitles/captions support in Picture-in-Picture and on making resizing the PiP window on Windows a little easier. After that, we'll hopefully be able to tackle the support of the extended player controls - volume, playhead scrubber, and full screen.

Cheers,
Ania

Reply 2

Pneen 5 months ago

I'd really like to see support for subs in PiP on videos using WebVTT, the web standard for subs. I wouldn't expect much else at this time. Thanks for having this on your roadmap! The desktop teams always have so much more in the works than the mobile teams.

Reply 1

Ania Mininkova 5 months ago

Hi Pneen,

We're going to begin limited support of WebVTT in Picture-in-Picture in Nightly 99.

From what we've seen so far, WebVTT has pretty uneven adoption (almost all top video hosters have their own subtitles implementions even if they accept WebVTT as subtitles format from creators), and the W3C spec has been in the candidate status since 2019.

I wonder if there are particular websites that you use that support WebVTT?

Reply 0

Jon Siddoway 6 months ago

Status label added: Mozilla developing

Status label removed: Mozilla reviewing

This idea has been reviewed by Mozilla and is now on our current roadmap for development. Please continue voting for and submitting ideas, and stay tuned for updates.

Reply 3