Building Firefox's Picture-in-Picture Support(hacks.mozilla.org)
hacks.mozilla.org
Building Firefox's Picture-in-Picture Support
https://hacks.mozilla.org/2020/01/how-we-built-picture-in-picture-in-firefox-desktop/
132 comments
I am told that Firefox Nightly now allows you to use keyboard shortcuts to seek the video. Part of the problem here is that there are some sites that have special logic around seeking, so having playback controls on the PiP popup can cause the original page's custom controls to get confused or out of sync.
That would be great. My main use-case is watching youtube videos.
When watching a video, I often pause (space) to have a better look at what's on the screen [-> rewind (left)] -> play (space)
I absolutely loathe youtube's "suggested videos" that pop in my face when I try to focus on a specific frame. I never used that feature, it's just a way to shove ads in my face. Moreover, if I close it, the open/close button is now focused, and space brings it up again instead of resuming the video. This is tedious.
I thought that PiP would solve that, but it looks like I cannot pause the video with space if I haven't clicked the pause button already, and I can't seek.
I often just revert to pasting the URL for mpv to open it after getting frustrated and losing my time with both other methods.
When watching a video, I often pause (space) to have a better look at what's on the screen [-> rewind (left)] -> play (space)
I absolutely loathe youtube's "suggested videos" that pop in my face when I try to focus on a specific frame. I never used that feature, it's just a way to shove ads in my face. Moreover, if I close it, the open/close button is now focused, and space brings it up again instead of resuming the video. This is tedious.
I thought that PiP would solve that, but it looks like I cannot pause the video with space if I haven't clicked the pause button already, and I can't seek.
I often just revert to pasting the URL for mpv to open it after getting frustrated and losing my time with both other methods.
Are you sure Youtube's keyboard shortcut for pause is "Space" for you? For me it's K, with J being jump backward a few seconds and L being jump forward a few seconds. I don't know if the media buttons (Pause, Rewind, Fast Forward) would also work as this keyboard pre-dates Windows 95 so it doesn't have anything like that. [ Yes I should buy a new keyboard... ]
Thank you, I hadn't realized there were separate keyboard shortcuts, even though the one for pause is indicated on hover.
Even though space conflicts with toggling the currently selected item (tab/space), it is the more common shortcut in video player applications, and is quite easy to reach. I also think that mouse clicking an element shouldn't change the keyboard selection to that one.
Not sure how those media control are interpreted, I think I usually set them to control the MPRIS interface, so they would at the very least work on KDE with plasma browser integration.
Written with my SUN type-7 keyboard
Even though space conflicts with toggling the currently selected item (tab/space), it is the more common shortcut in video player applications, and is quite easy to reach. I also think that mouse clicking an element shouldn't change the keyboard selection to that one.
Not sure how those media control are interpreted, I think I usually set them to control the MPRIS interface, so they would at the very least work on KDE with plasma browser integration.
Written with my SUN type-7 keyboard
Space works as long as the video player has keyboard focus. Otherwise the default browser behavior takes over which is the same as Page Down.
You can use stylish to remove the suggested popup div, if there's any interest I will put up a gist somewhere. I also wrote some custom CSS to center the controls rather than have them spread across my ultra-wide monitor. Huge quality of life improvement if you watch a lot of yt.
Here are my stylesheet changes; https://pastebin.com/mRgPWKTd
[deleted]
I use this all the time to watch Netflix while programming: put Netflix in PiP mode, then put the resulting window in the corner and switch to other applications to work.
It blows my mind that you can watch Netflix and program at the same time.
Sometimes coding is just mindless typing some boiler plate. It's easy to pay attention to something else. I see it like listening to podcast or something while mindlessly grinding in a game.
[deleted]
It's definitely not as efficient, but when I'm doing repetitive work it helps
The analogy I like is how people listen to the radio while driving. Sometimes you’re just doing something pretty simple (like a tedious refactor) and can move forward while watching something else
> I've grown to truly hate this kind-of-PiP thing many websites
Yep. This is the quickest way to chase me off your site and ensure I don't follow links to you.
I seriously would be perfectly fine with a browser that did not know how to play video or animate gifs.
Yep. This is the quickest way to chase me off your site and ensure I don't follow links to you.
I seriously would be perfectly fine with a browser that did not know how to play video or animate gifs.
My main complaint is that subtitles don't work with it (on Netflix, at least).
You don't have to use it. For me, it works when I'm trying to dual task on a single monitor. For example, I use it regularly on my smartphone (with a native video player).
As for the example you mentioned: the issue is autoplay. Netflix just rolled out an update when they allow you to disable that non-feature.
You don't have to use it. For me, it works when I'm trying to dual task on a single monitor. For example, I use it regularly on my smartphone (with a native video player).
As for the example you mentioned: the issue is autoplay. Netflix just rolled out an update when they allow you to disable that non-feature.
Another thing with Netflix is that they somehow reload the page between episodes so you have to go back to the page and re-enable the PIP.
Youtube does not.
Youtube does not.
I’m not a super big fan of Firefox’s implementation here, but at the end it’s just about giving users options. The poor website behaviour you described is poor because it’s unexpected and you often don’t get much control over this.
In Safari, I like that I can pop a YouTube video out and then carry on coding or doing whatever. I think of it just like full screen mode.
In Safari, I like that I can pop a YouTube video out and then carry on coding or doing whatever. I think of it just like full screen mode.
[deleted]
I have to say I love this feature and have so since the first time I encountered it in my Firefox Nightly installation a few months ago (on Windows).
Glad to also have it available on Linux and Mac now. It's perfect for on-the-side Youtube videos.
Glad to also have it available on Linux and Mac now. It's perfect for on-the-side Youtube videos.
Yeah, I've been using the picture-in-picture feature regularly since I learned about it recently. Love it for running lectures and presentations on the side.
People using tiling window managers like i3 or sway should get friendly with this feature. It allows me to "full window" (note: not screen) netflix/amazon/YouTube videos in a tile which was impossible to do without PIP.
Either awesome or i3 used to allow me to fullscreen a video, then pop that fullscreen video out into it's own floating window, that I could then stick on top of all other windows, and make it stay on every workspace. Really cool way to get a hacky picture in picture mode way before firefox did this.
VLC has a feature called "float on top". Together with resizing, it allows basically something akin to picture in picture mode. You can use VLC to play YouTube videos by downloading them with youtube-dl. That is what I used before Firefox PiP mode was available in stable.
VLC can play YouTube directly―at least if YouTube didn't change the format again. Just ‘open’ the URL as a network source.
They changed the playlist format. It has been failing again.
Yep, but now you have a video window with a fixed window title, regardless of Tab, which makes it infinitely easier to programming window rules for.
Yep, sticky containers. Allows you to stick a container to an output, floating above all workspaces on that output.
Well, there's this PR... https://github.com/swaywm/sway/pull/4255 :)
> [...] However, one may simply wish to consume the fullscreen UI, not actually fullscreen the application [...]
> This PR implements a fullscreen inhibition feature in sway. When inhibited, sway will answer fullscreen requests correctly, but will not fullscreen the container.
> [...] However, one may simply wish to consume the fullscreen UI, not actually fullscreen the application [...]
> This PR implements a fullscreen inhibition feature in sway. When inhibited, sway will answer fullscreen requests correctly, but will not fullscreen the container.
At least in i3 and bspwm this is possible by fullscreening in firefox and then hitting your windowmanagers fullscreen shortcut.
Hmm, that worked for me in i3 before but not in bspwm.
I tried FF PiP recently, but I have "bspwm config honor_size_hints true" and that makes the window resize itself until it's the size of a postage stamp.
The above is a known bug in FF, though apparently fixed in FF73: https://bugzilla.mozilla.org/show_bug.cgi?id=1600414
I tried FF PiP recently, but I have "bspwm config honor_size_hints true" and that makes the window resize itself until it's the size of a postage stamp.
The above is a known bug in FF, though apparently fixed in FF73: https://bugzilla.mozilla.org/show_bug.cgi?id=1600414
I3 can already do floating sticky windows which is essentially the same thing. It used to be possible to pop Chrome into a floating window from full screen but now both browsers fall out of full screen when floating - maybe this will bring it back - or is that what you meant?
I was very pleasantly surprised to see how well this worked with i3, even if it was technically possible to get something equivalent with a lot of button presses, Firefox PIP is a lot easier.
This.
For Chrome users, I was using the "Windowed - floating Youtube/every website" plugin to achieve the same effect. It also gives you the control UI, which PiP doesn't have yet.
For Chrome users, I was using the "Windowed - floating Youtube/every website" plugin to achieve the same effect. It also gives you the control UI, which PiP doesn't have yet.
> impossible to do without PIP.
This is not my experience. I see no added value in this PIP.
I use XMonad, which is a tiling window manager. I've always been able to put a video into applicative full screen, then switch the layout to whatever I want. E.g. 2 browsers windows each playing a borderless video.
Before XMonad, I remember that when I switched to another workspace/window and back, my browser window would have stopped being fullscreen.
I'd rather have Firefox not adding hacks to work around the flaws of mainstream window managers.
This is not my experience. I see no added value in this PIP.
I use XMonad, which is a tiling window manager. I've always been able to put a video into applicative full screen, then switch the layout to whatever I want. E.g. 2 browsers windows each playing a borderless video.
Before XMonad, I remember that when I switched to another workspace/window and back, my browser window would have stopped being fullscreen.
I'd rather have Firefox not adding hacks to work around the flaws of mainstream window managers.
There's a reason I mentioned only i3 and sway, they stick to managing _windows_ and thus only inform the application of their window size. Screen size is unabated by them, thus when applications that have a full screen mode size-up they get the real screen size. I3 author(s) specify purity as their reasoning for this and I actually agree with them. There are some other nuances with full screen that tie into this, too, such as signalling to the app to enter full screen instead of simply resizing the applications window means in most cases the user gets a more intuitive result.
XMonad's[0] default behaviour of being able to separately tell a program to go "fullscreen" (i.e. hide most UI) and control what portion of the screen its window takes up is extremely valuable, since many programs don't give you the option of separately hiding their UI, and it's only possible by making them go fullscreen. However, being able to hide the UI is actually most valuable when there is more than one window on the screen... This is especially important when you have a small (or average-sized) screen, but it's also useful on larger ones to avoid distractions.
Getting the "normal" fullscreen is just two keyboard shortcuts away ("fullscreen" the program and assign its window the entire screen), rather than one. From an intuitiveness point of view, being able to hide a program's UI and change its window size separately is arguably more intuitive — according to the separation of concerns, the former is managed by the program itself and the latter by the WM.
PiP is really nice, but videos aren't the content for which getting a distraction-free experience is most important...
[0] I'm sure that it's also possible with other tiling WMs such as ratpoison, stumpwm, awesome etc.
Getting the "normal" fullscreen is just two keyboard shortcuts away ("fullscreen" the program and assign its window the entire screen), rather than one. From an intuitiveness point of view, being able to hide a program's UI and change its window size separately is arguably more intuitive — according to the separation of concerns, the former is managed by the program itself and the latter by the WM.
PiP is really nice, but videos aren't the content for which getting a distraction-free experience is most important...
[0] I'm sure that it's also possible with other tiling WMs such as ratpoison, stumpwm, awesome etc.
That sounds more like xmonad isn’t honouring WM hints properly? Might be handy but is that a ‘failing’ of mainstream window managers?
On mac os its mostly unusable, because this PIP window stays on same workspace. My browser is always fullscreen and in safari I can open small youtube window and move to other workspace (code, for example) and window still exists on each of them.
This would be one advantage of the system's built-in PiP mode employed by Safari. I don't find the limitations (maximum size, single video) to be hinderances.
I wish Safari could just open the video in a normal QuickTime Player window instead of a QuickLook-esque thing...
I am told one problem with the native macOS PiP window is that it does not allow programs to configure which playback controls to show. There is a Firefox bug in file for the workspace issue. Chromium works around this and Firefox is likely to use the same approach.
I recommend using mpv with the open-with extension instead (right click -> open with -> mpv.) Thanks to youtube-dl, mpv will handle most any video website except netflix. If you tell mpv to stay-on-top, the effect essentially picture-in-picture, but with the full capability of mpv. You can drag new links into mpv to change what video is playing (hold down shift while dragging in a new link to append to the playlist.)
https://github.com/darktrojan/openwith
https://github.com/darktrojan/openwith
I tried this because FF doesn't do hardware video decoding yet, and, on an older laptop, FF was taking up a whole core for watching YouTube vs. around 30% in mpv.
Unfortunately every "open with.." solution I tried though took 10-15 seconds to open the video in mpv, which turned out to be even more frustrating than the problem.
Unfortunately every "open with.." solution I tried though took 10-15 seconds to open the video in mpv, which turned out to be even more frustrating than the problem.
I've experienced what you describe. I think the problem is most severe when you're on a high-latency connection, such as a VPN to an endpoint far away, because there are a few round trips in the process with youtube-dl. I don't really have a solution to that, but using --force-window=immediate can help a little (it will make a blank mpv window appear immediately, before the video is ready, so at least you aren't left wondering whether you misclicked prior to the video starting.)
> To work around these problems, we rely on the fact that the web page is being sent events from the browser engine. At Firefox, we control the browser engine! Before sending out a mouse event, we can check to see what sort of DOM nodes are directly underneath the cursor.
This triggered some mental alarm bells when I read it.
I understand what Mozilla is trying to accomplish, but this feels like it could become a serious WTF moment for a developer. "There is absolutely no way in hell this element should be able to receive mouse events right now, what is Firefox doing?"
Is this a problem? Perhaps the web is so far down the hacks/exceptions route that adding one more legitimately won't make a difference?
This triggered some mental alarm bells when I read it.
I understand what Mozilla is trying to accomplish, but this feels like it could become a serious WTF moment for a developer. "There is absolutely no way in hell this element should be able to receive mouse events right now, what is Firefox doing?"
Is this a problem? Perhaps the web is so far down the hacks/exceptions route that adding one more legitimately won't make a difference?
A Web developer is never going to see this. The events mentioned are being sent to the Shadow DOM which implements the PiP UI (as well as the default video controls UI), not the webpage.
I don't think they are talking about mouse events the website can observe. Firefox needs to figure out where the video is and make it's UI on top of that work, there is no observable interaction with the site DOM or its event handlers.
The post says that the video element is told it's being hovered, although it is unclear if that means the rendering context has that element set to hover (thus CSS changes even if pointer events is set to none), or that some internal-to-the-browser state is set to hover for the video.
Yeah I must agree with you. Reading that part, I could only think: “Someone will figure out how to turn this into a major security issue.”
It sounds like the kind of stuff that clickjackers use, but this sounds like it could be used for even more nefarious purposes.
It sounds like the kind of stuff that clickjackers use, but this sounds like it could be used for even more nefarious purposes.
Picture in Picture is great for lectures or follow-along tutorials and I'm glad people are taking it more seriously (initially was using Youtube on Safari purely because of this feature, but later on Chrome had it... albeit a bit wonky, I started using it on Chrome normally).
I would love to have an external controller for start/stop/fast forward/rewind when watching tutorials on Youtube. For example a controller [1] people are using to edit videos. Quite often I would like to pause the video for a while, repeat last 30 sec or by-pass some boring segment.
[1] https://www.amazon.com/Contour-Design-Shuttle-Xpress-Multime...
[1] https://www.amazon.com/Contour-Design-Shuttle-Xpress-Multime...
You might be aware but youtube at least have j,k,l as shortcut keys for reversing 10s, paus/play, and forwarding 10s.
Doesn't work within the PIP window though.
Doesn't work within the PIP window though.
I hesitate to mention mpv a second time in the same thread, but using mpv should make this fairly easy. You can control mpv over a unix socket, which should allow you to implement nearly any custom control scheme you can think of.
https://mpv.io/manual/master/#json-ipc
https://mpv.io/manual/master/#json-ipc
It's doable as an extension that communicates with a native program. There are already such extensions for media buttons, you might want to look among them―some may allow you to reconfigure the keys. Search for ‘media keys’ in the extension store.
However, rewinding is probably not among standard functionality of these extensions.
However, rewinding is probably not among standard functionality of these extensions.
That is an awesome idea. Would be extremely useful for guitar and transcription too, while writing the text in Word.
It typically would be a usecase for the Macbook touch bar, does anyone has one and can tell us whether it has an integration with web videoplayers?
It typically would be a usecase for the Macbook touch bar, does anyone has one and can tell us whether it has an integration with web videoplayers?
Videos and audio in Safari use the touchbar as a scrubber with controls.
Everything old is new again it seems. Anyone used Maxthon Browser before? It was multiengine browser, which used both Webkit and Trident under the hood. It has that feature for ages, just for flash content back than.
If only someone would built good email client into Browser like old Opera, that would be godsend. Opera and Maxthon were ages ahead in terms of certain features.
It is little weird for me, they ended up putting video within shadow DOM container.
If only someone would built good email client into Browser like old Opera, that would be godsend. Opera and Maxthon were ages ahead in terms of certain features.
It is little weird for me, they ended up putting video within shadow DOM container.
Wow that’s a blast from the past! I also used... damn I can’t remember. It used Gecko as its engine, implemented mouse gestures for navigation among other nice features Firefox didn’t have at the time.
With (some) television sets in mind that popularized (for, um, me at least) the picture-in-picture term as one channel of video on top of another channel of video, it feels weird that the term is here used when only a minimum of 1 videos is involved...
You're witnessing etymology in work:
- the mechanism is about the same: the video stays in the corner
- the term ‘picture in picture’ is already familiar to people, from TVs
...so the term is generalized. Happens a lot. If the feature gets popular and the term sticks around, decades later people might search the web for ‘why is it called PiP when it's not what it does’. We can even imagine that zero videos may be involved by then (though unlikely―there are other terms for that.)
- the mechanism is about the same: the video stays in the corner
- the term ‘picture in picture’ is already familiar to people, from TVs
...so the term is generalized. Happens a lot. If the feature gets popular and the term sticks around, decades later people might search the web for ‘why is it called PiP when it's not what it does’. We can even imagine that zero videos may be involved by then (though unlikely―there are other terms for that.)
I feel the same way. This is just a new way of windowing the content, not displaying 2 different sources in one screen.
I've seen a couple of this breaking the video out of the main layout, but not sure if it was this Firefox feature or not. I was pretty sure that once the video broke out of the normal layout, the original location of the video was replaced with ads playing without audio. I was immediately turned of by it.
I've seen a couple of this breaking the video out of the main layout, but not sure if it was this Firefox feature or not. I was pretty sure that once the video broke out of the normal layout, the original location of the video was replaced with ads playing without audio. I was immediately turned of by it.
Main problem I have is captions from Netflix don't work which is important for me. Would have been nicer if we could have popped out a div instead.
To be perfectly honest, I didn't realize this was a Firefox feature. I thought it was just a new part of YouTube.
This is honestly one of my favorite features in firefox.
fwiw you can get this feature as an extension in Chrome and Safari.
for example, this is published by google: https://chrome.google.com/webstore/detail/picture-in-picture...
for example, this is published by google: https://chrome.google.com/webstore/detail/picture-in-picture...
I've been waiting for this feature for years, and in my eyes, this seals Firefox as the number one browser out there. Previously to that, I was using Opera exclusively for this feature.
I wonder if an attacker could leverage this to play twenty-questions with a user.
Video is typically so-and-so dimensions in the bottom right-hand corner. Clicking the video (I assume) pauses it. Pausing a video (I assume) can change the request pattern for what is being streamed. Most sites use a white background (let's say).
So an attacker who controls video content can stream a still image of some site or browser security "statement" with a picture of a button to click if the statement is untrue. If the user clicks the fake button they stop the video and signal to the attacker their response to the statement.
Not super useful given an arbitrary page behind the video. But what if the video's content is about, say, how to change settings on your bank site to get a better APR? I can imagine someone assuming that the video has turned into a small "quiz" from the bank. Maybe even a "click here to proceed" button to get them to unpause the video.
Video is typically so-and-so dimensions in the bottom right-hand corner. Clicking the video (I assume) pauses it. Pausing a video (I assume) can change the request pattern for what is being streamed. Most sites use a white background (let's say).
So an attacker who controls video content can stream a still image of some site or browser security "statement" with a picture of a button to click if the statement is untrue. If the user clicks the fake button they stop the video and signal to the attacker their response to the statement.
Not super useful given an arbitrary page behind the video. But what if the video's content is about, say, how to change settings on your bank site to get a better APR? I can imagine someone assuming that the video has turned into a small "quiz" from the bank. Maybe even a "click here to proceed" button to get them to unpause the video.
the entire concept reminds me too much of iframes, embedded flash and Java applets. i can see many security problems coming with this in the future. especially if they try to make it a real window that can jump tabs and stay pinned, which seems to be what most people here would really want and an obvious next feature.
think about click jacking, address bar spoofing, and similar mosaic style hijacking. that's not even getting into potential CORS and origin spoofing potential.
think about click jacking, address bar spoofing, and similar mosaic style hijacking. that's not even getting into potential CORS and origin spoofing potential.
I much rather they would provide video stream hook so I could execute my own player as the external one (VLC, Mplayer, etc). As it is I have a bunch of custom userscripts injecting my own hook into selected websites.
This is the Picture-in-Picture API it implements: https://w3c.github.io/picture-in-picture/
I am surprised that the API is modelled to only allow watching videos in PiP, while the old and mature Fullscreen API allows to put any element in full screen. These should be analogous. I don't see a reason why I can run a <video> in a small window, but not a <canvas> a <picture>, etc.
I am surprised that the API is modelled to only allow watching videos in PiP, while the old and mature Fullscreen API allows to put any element in full screen. These should be analogous. I don't see a reason why I can run a <video> in a small window, but not a <canvas> a <picture>, etc.
Mozilla's choice to add their own pip button is a massive pain for anyone developing video applications - anywhere over the player can't be considered a safe space to add our own buttons anymore, it really feels like Mozilla didn't talk to any video service developers when deciding how to approach this problem.
Pip needs to be common API driven (as Chrome is) to make building portable video applications possible.
A terrible misstep from Mozilla. (And yes, this has been repeatedly raised on the bug tracker with no answer)
Pip needs to be common API driven (as Chrome is) to make building portable video applications possible.
A terrible misstep from Mozilla. (And yes, this has been repeatedly raised on the bug tracker with no answer)
> Pip needs to be common API driven (as Chrome is)
Ah yes, Mozilla should follow the steps of Google's web experiments playground, the Chrome browser. Every month we hear about a new self-serving feature implemented by Google/Chrome engineers.
The web is slowly drifting to the IE days again, and of course this move by Mozilla doesn't help it, but let's not forget the bigger culprit.
Ah yes, Mozilla should follow the steps of Google's web experiments playground, the Chrome browser. Every month we hear about a new self-serving feature implemented by Google/Chrome engineers.
The web is slowly drifting to the IE days again, and of course this move by Mozilla doesn't help it, but let's not forget the bigger culprit.
Maybe this is inconvenient for developers, but as a user, it feels awesome to know that the browser is technically capable of doing something, and does it when I ask, not at the behest or limitation of the PiP API. You know YouTube/Google would put this feature of my browser behind a Premium paywall.
So much of the modern web is "run your code on my computer," so this feels nice, where the browser is my tool to browse the web.
So much of the modern web is "run your code on my computer," so this feels nice, where the browser is my tool to browse the web.
The other browsers have it implemented as an extension that adds a button to the browser's chrome which I think is a better place. I too think it's a bit ham fisted to inject UI like this. Though I admit that Firefox's impl is obvious to the average user where a new, vague button icon in the browser's chrome is not.
Well it'd be handy if I could PiP another non-video tab.
Firefox PiP needs a few additions - first of all show subs, second allow me to change the shortcut position in videos - sometimes next/prev arrows are on top of the element, making it impossible to click :/
Spotify web player has a feature where it shows the album art as a picture in picture. For some reason, it's disabled in Firefox.
I've been using PiP in Opera for years, glad to see other browsers starting to implement useful features.
[deleted]
I love this feature. I wish it worked with Mixer. At least it work on Twitch!
Obligatory comment about Opera: Afaik, the video pop out feature was published in Opera 37, May 2016, a few months before it was added to Safari.
[deleted]
> Given that it would be available on any video content, the feature needed to be discoverable and straight-forward for as many people as possible.
This is the designer’s nightmare: Every feature needs to be available to everyone, therefore be visible on the screen. Yet they only cite rare usecases: « Watching sports event while continuing to browse the web ». In the meantime, the blue tone isn’t generally consistent with the websites’ colors.
I would have supposed moderatelt-used features belongs in the right-click menu like the rest, or they need to find a way to merge it with the video controls (I guess an Apple designer would imagine a new kind of special press to detach the video, which is fine too).
This is the designer’s nightmare: Every feature needs to be available to everyone, therefore be visible on the screen. Yet they only cite rare usecases: « Watching sports event while continuing to browse the web ». In the meantime, the blue tone isn’t generally consistent with the websites’ colors.
I would have supposed moderatelt-used features belongs in the right-click menu like the rest, or they need to find a way to merge it with the video controls (I guess an Apple designer would imagine a new kind of special press to detach the video, which is fine too).
> This is the designer’s nightmare:
Web designers are users' nightmares. Hiding a useful feature just because you don't like the color, to scratch your designer itch, isn't helpful to users.
The article says: "ideal if, for example, you want to keep an eye on that sports game while also getting some work done." This is only mentioning a single use-case, not enumerating all possible use cases. It's useful for a hell of a lot more than just sports. (Also, watching sports may be rare for you and I, but I don't think that qualifies as a rare usecase for the general population.)
Web designers are users' nightmares. Hiding a useful feature just because you don't like the color, to scratch your designer itch, isn't helpful to users.
The article says: "ideal if, for example, you want to keep an eye on that sports game while also getting some work done." This is only mentioning a single use-case, not enumerating all possible use cases. It's useful for a hell of a lot more than just sports. (Also, watching sports may be rare for you and I, but I don't think that qualifies as a rare usecase for the general population.)
I feel like this is the type of feature that should be a browser extension. It could be an officially supported one from Mozilla.
Safari implements this natively and it’s super handy.
I imagine if you intently watch videos it’s not useful, but for multitasking it’s great. Or note taking etc.
I imagine if you intently watch videos it’s not useful, but for multitasking it’s great. Or note taking etc.
I thought this might have been some Steam tie-in or otherwise not a Firefox built-in feature, never clicked it.. and now I can't even try it as the button's not appearing, it seems pretty unstable. Not that I really want to... This solves a problem I've never had. What's so hard about moving the video to a new window, or if your screen is too small moving the window to a new monitor? In Linux you can also make the window smaller to just have the video visible and then make it "always on top" of whatever else you're doing.
For the life of me I can't see why anyone would need picture in picture for browsers.
More features most people don't need.
Please come down to earth Mozilla.
You have lost your way.
Please revisit NCSA Mosaic and witness your roots.
I find it quite handy when browsing YouTube. I even thought it was a YouTube feature before I realised it didn't work in chrome.
PiP has greatly improved my Zwift+Netflix experience. Zwift is a "fitness game" that is best enjoyed with a TV stream alongside (sorry Zwift, you're not that engaging), that like most games doesn't really support arbitrary aspect ratio and that is best enjoyed on the big TV screen. It can easily tolerated some of its UI getting obscured but you do want to keep it focused for possible key events. Before PiP arranging those windows was a permanent struggle with focus and tricks to hide as much of the browser UI as possible (not much). It's still not perfect because PiP is reset between episodes, but I don't expect this to remain a problem forever.
I use PIP a lot in Chrome while browsing Reddit. If I see a video link, I can play the video while continuing to scroll through Reddit comments.
(YouTube PIP is kind of difficult to discover; you have to right-click, move the mouse off the menu, and right-click again to get the native right-click menu, which is where the PIP button is.)
(YouTube PIP is kind of difficult to discover; you have to right-click, move the mouse off the menu, and right-click again to get the native right-click menu, which is where the PIP button is.)
Why not just open it in another tab?
You mean open in another window, arrange and resize that window to not get in the way while making the video visible, hoping that the website layout doesn't make that close to impossible, and still not easily being able to have it stay on top of the window you interact with... instead of a single click that does the right thing?
Is there a way to disable PIP support? The blue floating icon is quite distracting for me, I wouldn’t mind PIP but I can’t stand the floating icon.
A comment on reddit said they use it all the time when following coding tutorials. Seems like a handy use case.
That brings up a second question: who watches coding tutorials? I'd imagine it's probably people with less than a few weeks of coding experience, because it's horribly inefficient compared to text tutorials.
I find them valuable if you don't need to write code to experiment with but can just watch the video at the regular speed and get the concepts that you can then use in your project. Also allows for watching while you do other stuff on the side.
SymfonyCasts is an example where I like the videos. They aren't the typical YouTube style of "let me talk about random things for 5 minutes so I get this video over the 10 minute mark", they get pretty much straight to the point. They have a text version below, which also makes search easy, And you can click on any sentence in the text version to jump to the right position in the video. I found them very helpful when I started with Symfony, but haven't really watched any once I had a solid enough understanding to get work done and incrementally learn more things as I need them.
SymfonyCasts is an example where I like the videos. They aren't the typical YouTube style of "let me talk about random things for 5 minutes so I get this video over the 10 minute mark", they get pretty much straight to the point. They have a text version below, which also makes search easy, And you can click on any sentence in the text version to jump to the right position in the video. I found them very helpful when I started with Symfony, but haven't really watched any once I had a solid enough understanding to get work done and incrementally learn more things as I need them.
I've occasionally found them helpful for less mainstream stuff where there's a lack of quality resources.
The 'failure mode' for a lazy text tutorial is that important details are left out. The 'failure mode' for a lazy video tutorial is that they didn't edit anything out.
The 'failure mode' for a lazy text tutorial is that important details are left out. The 'failure mode' for a lazy video tutorial is that they didn't edit anything out.
One of my few very good teachers in school highlighted that people learn differently - some people by reading, others doing and others again watching. I'm most definitely somewhere between the last two. I find that for me watching high quality tutorials (pluralsight, CBTNuggets, etc) at 1.5-2x speed is a very good way to get introduced into a language particularly when I seed a solid foundational understanding rather than knowing exactly how to add an additional command into npm run, etc.
> I'd imagine it's probably people with less than a few weeks of coding experience
In the end everybody eventually needs to learn from written content; not only for the viewers efficiency, but also because it's more efficient for content creators to produce written content over video content.
You can even guess your 'reckon' from looking at the kind of video content that is out there - again, this seems mostly to be a consequence of creator efficiency.
With that said, who cares?
Hell, I sometimes hit up streams - for instance, Antirez has been streaming himself building out parts of Redis 6, because it may introduce me to new techniques or minutae I didn't know. It's way, way, way more chill than reading source code, and it's a lot better than the blog post on it he probably won't write.
In the end everybody eventually needs to learn from written content; not only for the viewers efficiency, but also because it's more efficient for content creators to produce written content over video content.
You can even guess your 'reckon' from looking at the kind of video content that is out there - again, this seems mostly to be a consequence of creator efficiency.
With that said, who cares?
Hell, I sometimes hit up streams - for instance, Antirez has been streaming himself building out parts of Redis 6, because it may introduce me to new techniques or minutae I didn't know. It's way, way, way more chill than reading source code, and it's a lot better than the blog post on it he probably won't write.
Anything with an unfamiliar IDE can be very confusing without a video tutorial.
Which approach has better efficiency is dependent on person.
I use picture in picture all the time! I have 3 monitors, but still not enough spave to take a full one up with a browser. So if I've got a YouTube video playing I'll pop it out and stick it in a corner of one.
I use PiP for various videos, whilst I’m working and not splitting the screen.
I do love that feature.
I wish it was a little bit easier to maximize on other monitors
instead of having to try to resize it perfectly
I wish it was a little bit easier to maximize on other monitors
instead of having to try to resize it perfectly
it allows me to size a video frame arbitrarily from YouTube across multiple monitors, rather than relying on YouTubes stepped resize and wasting screen real estate on YT comments.
it allows me to size video frames arbitrarily across streaming sites like CyTube that don't support frame-out natively.
As someone who had to use mosaic and gopher and all that shit, i'd really rather not revisit it. It's nice in the way that it's sort of quaint to boot up an old workstation that has nothing but QBASIC, but it's not actually pleasant or useful.
it allows me to size video frames arbitrarily across streaming sites like CyTube that don't support frame-out natively.
As someone who had to use mosaic and gopher and all that shit, i'd really rather not revisit it. It's nice in the way that it's sort of quaint to boot up an old workstation that has nothing but QBASIC, but it's not actually pleasant or useful.
I use it a lot because I have only one monitor.
Couldn't you just open it in a new window and resize/tile your existing windows?
Websites often change their layout depending on the window size. If you simply make the window smaller, the website may switch into a different layout that makes the video even smaller. It doesn't solve the problem of showing just the video with nothing else.
You are mad I use this feature all the time.
browsers let users access content from the internet and some of that content is video. for the life of me i can't see why it took so long ;)
Its helpful for increasing your ADHD.
1) I can pause the video, but cannot navigate it. I guess the navigation would be there if it was technically possible, but from practical standpoint this makes it useless even if it appealed to me in other ways. Popping a video into PiP mode and then go diving for the original tab to seek 10 seconds back to rewatch an interesting moment seems utterly bizarre.
2) I've grown to truly hate this kind-of-PiP thing many websites (news outlets mostly) do: Autoplay a video and then shove it to lower right corner when I try to scroll away. Along with timed "subscribe to newsletter" popup, this is an insta-close for me; Now why would I want to replicate this behavior elsewhere?
3) I'm literally unable to read through even the first words of that blogpost because of that gif. Now, thanks to this PiP feature, I can make any text unreadable by placing a distracting video on my screen.
While I'd welcome features that fight distraction (and not support attention fragmentation), there obviously is (significant part of?) FF userbase that will make use of this feature. Good for them.
Luckily for us grumpy farts, that blue PiP button can be turned off in preferences, we can mutter something about bloat, but generally go on with our lives.