10 ms·
Building Firefox's Picture-in-Picture Support
- frankharv 7y agoFor 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.
- jbrooksuk 7y agoI use PiP for various videos, whilst I’m working and not splitting the screen.
- micael_dias 7y agoI find it quite handy when browsing YouTube. I even thought it was a YouTube feature before I realised it didn't work in chrome.
- shrewduser 7y agoYou are mad I use this feature all the time.
- Scarbutt 7y agoIts helpful for increasing your ADHD.
- faitswulff 7y agoA comment on reddit said they use it all the time when following coding tutorials. Seems like a handy use case.
- gruez 7y agoThat 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.
- faitswulff 7y agoAnything with an unfamiliar IDE can be very confusing without a video tutorial.
- luckylion 7y agoI 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.
- kube-system 7y agoI'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.
- yoloClin 7y agoOne 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.
- hhhhhhh4hh 7y agoWhich approach has better efficiency is dependent on person.
- 7y ago
- LandR 7y agoI 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.
- mdw 7y agoIs 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.
- butterthebuddha 7y agohttps://support.mozilla.org/en-US/kb/about-picture-picture-firefox#w_enabling-disabling-the-picture-in-picture-toggle-in-settings https://support.mozilla.org/en-US/kb/about-picture-picture-f...
- Barrin92 7y agoI use it a lot because I have only one monitor.
- Mirioron 7y agoCouldn't you just open it in a new window and resize/tile your existing windows?
- kccqzy 7y agoWebsites 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.
- db48x 7y agoYea, I don't get it either. On the other hand, I almost never use a window that isn't maximized.
- silon42 7y agoIt's useful sometimes. Other times, I'd love to have a feature that would maximize to the browser content area, keeping the tab navigation (including sidebar).
- Zarel 7y agoI 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.)
- Mirioron 7y agoWhy not just open it in another tab?
- detaro 7y agoYou 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?
- thekelvinliu 7y agobrowsers 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 ;)
- serf 7y agoit 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.
- hhhhhhh4hh 7y agoI 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
- usrusr 7y agoPiP 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.
- sdan 7y agoPicture 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).
- jpalomaki 7y agoI 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-Multimedia-Controller/dp/B0001DBEKG https://www.amazon.com/Contour-Design-Shuttle-Xpress-Multime...
- alexis_fr 7y agoThat 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?
- daxelrod 7y agoVideos and audio in Safari use the touchbar as a scrubber with controls.
- tjoff 7y agoYou 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.
- catalogia 7y agoI 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
- Wowfunhappy 7y ago> 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?
- detaro 7y agoI 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.
- hoten 7y agoThe 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.
- stingraycharles 7y agoYeah 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.
- reubenmorais 7y agoA 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.
- Jestar342 7y agoPeople 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.
- explodingcamera 7y agoAt least in i3 and bspwm this is possible by fullscreening in firefox and then hitting your windowmanagers fullscreen shortcut.
- mxmilkb 7y agoHmm, 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 https://bugzilla.mozilla.org/show_bug.cgi?id=1600414
- darau1 7y agoEither 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.
- Jestar342 7y agoYep, sticky containers. Allows you to stick a container to an output, floating above all workspaces on that output.
- tetris11 7y agoYep, 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.
- 7y ago
- sverhagen 7y agoWith (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...
- dylan604 7y agoI 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.
- aasasd 7y agoYou'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.)
- jancsika 7y agoI 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.
- chrismarlow9 7y agothe 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.
- LEARAX 7y agoTo be perfectly honest, I didn't realize this was a Firefox feature. I thought it was just a new part of YouTube.
- alexis_fr 7y ago> 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).
- Wowfunhappy 7y agoI feel like this is the type of feature that should be a browser extension. It could be an officially supported one from Mozilla.
- AlphaSite 7y agoSafari 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.
- catalogia 7y ago> 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.)
- dthul 7y agoI 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.
- lioeters 7y agoYeah, 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.
- deleted 7y ago[deleted]
- prook 7y agoAt first I didn't even realize this was FF feature (I suspected something like gstreamer, but was lazy to investigate). Now that I know it is indeed FF, I just cannot wrap my head around it... 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.
- deleted 7y ago[deleted]
- fiddlerwoaroof 7y agoI 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.
- tetris11 7y agoSame, also for YouTube, KimCartoon and many others. The reason I mention them is because the window ID of the PiP is fixed, meaning that I can easily define a window rule for it in my desktop environment independent from Firefox I'm loving this.
- 7y ago
- maxfrai 7y agoOn 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.
- dhritzkiv 7y agoThis 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.
- jorvi 7y agoCan't you trigger that in Firefox also by right clicking on a video (or twice on YouTube) and then choosing PiP?
- sercand 7y agoProblem is Firefox PiP don’t move other desktops on macOS. It is only available at where your window is.
- Wowfunhappy 7y agoI wish Safari could just open the video in a normal QuickTime Player window instead of a QuickLook-esque thing...
- cpeterso 7y agoI 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.
- catalogia 7y agoI 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
- dndmmdmdmd 7y agornd
- dndmmdmdmd 7y agornen
- dndmmdmdmd 7y agodnfnfnn
- deleted 7y ago[deleted]
- dingaling 7y agoWell it'd be handy if I could PiP another non-video tab.
- drannex 7y agoThis is honestly one of my favorite features in firefox.
- hombre_fatal 7y agofwiw 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-extens/hkgfoiooedgoejojocmhlaklaeopbecg?hl=en https://chrome.google.com/webstore/detail/picture-in-picture...
- rasz 7y agoI 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.
- cheez 7y agoMain 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.
- Jach 7y agoI 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.
- Merg 7y agoEverything 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.
- girvo 7y agoWow 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.
- GeneticGenesis 7y agoMozilla'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)
- thrtythreeforty 7y agoMaybe 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.
- hombre_fatal 7y agoThe 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.
- mrpopo 7y ago> 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.
- Quai 7y agoObligatory 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.
- atulvi 7y agoSpotify web player has a feature where it shows the album art as a picture in picture. For some reason, it's disabled in Firefox.
- Flott 7y agoI love this feature. I wish it worked with Mixer. At least it work on Twitch!
- huxflux 7y agoI'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.
- megavolcano 7y agoI've been using PiP in Opera for years, glad to see other browsers starting to implement useful features.
- tilolebo 7y agoReally awesome feature! Now I understand why I always see this little blue icon in my Udemy course. Too bad it is "under" the button to switch to the next video, so I can't actually click it...
- jaharios 7y agoYou can right click to get the menu option, if needed try right clicking two times.
- warpech 7y agoThis is the Picture-in-Picture API it implements: https://w3c.github.io/picture-in-picture/ 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.
- tommica 7y agoFirefox 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 :/