Enable Chrome's new Picture-in-Picture mode - gHacks Tech News

Enable Chrome's new Picture-in-Picture mode

Google is working on bringing a new picture-in-picture mode based on a W3C API to Google Chrome; Chrome Canary users may enable the new functionality in the web browser already while users who run other versions of Chrome need to wait until the feature lands in their browser versions.

The implementation is based on a standardized API for picture-in-picture functionality that moves videos that play in the web browser in a small overlay window that acts independently of the main browser window.

The new picture-in-picture API works on the majority of sites by default; website publishers may utilize it to customize the picture-in-picture experience on their sites; it is possible to change the size of the picture-in-picture interface, customize controls, add restrictions, or use it to gather statistical data.

Apple implemented the picture-in-picture API in Safari for Mac OS X and iOS, and Google decided to create an experiment for Chrome to determine whether it is worthwhile to implement the API in the stable version of the web browser.

Google plans to launch the experiment in Chrome 68 Beta and will end it when Chrome 69 Stable is released. In other words, the experiment will run between June 7, and August 30, 2018.

Google Chrome Canary users may enable picture-in-picture support in the web browser right away. Note that the implementation is not super-stable right now but that it works on the majority of sites with video content.

Here is what you need to do:

Enable experimental flags

enable chrome picture in picture api

Load the following three URLs in the Chrome browser's address bar and enable the experimental flag in Chrome Canary. I suggest you enable all three and restart Chrome afterward (Chrome asks you for a restart when you change the status of any of the three preferences).

  1. chrome://flags/#enable-experimental-web-platform-features -- Enables experimental Web Platform features that are in development.
  2. chrome://flags/#enable-surfaces-for-videos .. Enable compositing onto a Surface instead of a VideoLayer for videos.
  3. chrome://flags/#enable-picture-in-picture -- Enable the Picture-in-Picture feature for videos

Install an experimental browser extension

chrome picture in picture extension

Download the following file from GitHub and extract it on the local system. It includes an extension for Google Chrome that unlocks the picture-in-picture mode implementation in the web browser when installed.

Load chrome://extensions once you have done that and slide the "Developer Mode" toggle to on to enable Developer Mode and the ability to load local extensions in the web browser.

Select "load unpacked" and browse to the /src/ folder of the archive that you unpacked on the local system.

Chrome should load the new picture-in-picture extension and add an icon to the main Chrome toolbar.

Use Picture-in-Picture mode in Chrome

chrome picture in picture

Activate the extension icon with a click or tap on any page with a video to push the video to the picture-in-picture popup.

The implementation has several limitations right now:

  • Only the first video is played in picture-in-picture mode. The next video, if autoplay is enabled, is not loaded automatically in the mode but plays in the main browser window.
  • The page the video is embedded on needs to remain open.
  • You cannot really navigate to another page in Chrome without video playback moving back to the main browser window, but you can use different programs.

The picture-in-picture mode works on YouTube, Vimeo and many other video sites automatically.

Opera Software implemented a custom picture-in-picture mode solution in the Opera browser. No word yet from Microsoft or Mozilla in regards to API support.

Now You: Do you use picture-in-picture mode already? Would you like to see it in your browser? (via Bleeping Computer)

 

Summary
Enable Chrome's new Picture-in-Picture mode
Article Name
Enable Chrome's new Picture-in-Picture mode
Description
Google is working on bringing a new picture-in-picture mode based on a W3C API to Google Chrome; Chrome Canary users may enable the new functionality in the web browser already while users who run other versions of Chrome need to wait until the feature lands in their browser versions.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:


Previous Post: «
Next Post: »

Comments

  1. Yuliya said on May 15, 2018 at 6:44 pm
    Reply

    On Android too: imgur.com/AiPtSnU
    And of course, it doesn’t work on YouTube…

    1. Weilan said on May 15, 2018 at 9:35 pm
      Reply

      NewPipe the YouTube alternative for Android has had this since forever. I wouldn’t use Chrome on Android so I wouldn’t care about that.

      NewPipe isn’t on the Play Store, because Google won’t allow it since it can play audio in the background. xD

  2. Richard Allen said on May 15, 2018 at 7:26 pm
    Reply

    I enabled it yesterday in Chrome Dev and it’s working okay but still has some bugs.

    I can’t close the pip and continue watching the video in the main browser window without refreshing the tab which ends up starting the video at the beginning. You can move the pip to a different location on the display and you can grab the edges of the video to make the pip bigger but that will stretch it and messes up the aspect ratio, you have to make a guess on the correct proportions to use. Once the extension was loaded I was able to disable the “Developer mode” and the extension still works, I wasn’t aware that could be done.

    I was able to open and close tabs, navigate pages, open links, minimize Chrome Dev, and the pip continues to play. And I like that it stays on top of any open program windows. Depending on how big the display that is being used is, I can see picture-in-picture being very useful. I watch a lot of vlogs and other embedded video online and would use this in Firefox if/when it becomes available. I don’t see myself moving to Chrome as my primary browser to use this. Anyway… that’s my story and I’m sti sti sticking to it! LoL

    Screenshot of YouTube video — The Librarian – SNL:
    https://s31.postimg.cc/8a81gx8qz/Picture-in-_Picture_Chrome_Dev.png

  3. Lee B said on May 15, 2018 at 8:24 pm
    Reply

    Hi

    Can you add link?
    Thanks

    1. Martin Brinkmann said on May 15, 2018 at 9:03 pm
      Reply
  4. XenoSilvano said on May 15, 2018 at 10:26 pm
    Reply

    Would be nice to have something like this for Firefox, I came across an extension once which allows for YouTube videos to play in a separate window, I tried to look for it just now but I could find it, the downside of it is that the window goes out of focus whenever it is not selected, the reason I wanted to get a ‘picture in picture’ WebExtension was so that I could watch YouTube videos as I am browsing through the web, the preference being that the window in which YouTube would be playing in would be in the foreground so that the window will be played on top of the others

    The ‘Sidebar for YouTube™’ WebExtension, seems interesting though

  5. Mikhoul said on May 16, 2018 at 4:11 am
    Reply

    A lot more complete implementation of PIP for Youtube is available here: https://chrome.google.com/webstore/detail/videonail-floating-youtub/nbpbjchgemnjhcpomnbjkkcfloafbema?hl=en 😊

  6. Rick A. said on May 16, 2018 at 5:20 pm
    Reply

    i’ve been doing this for a year or 2 on YouTube with Firefox using these 3 extensions:

    Enhancer For YouTube:
    https://addons.mozilla.org/EN-uS/firefox/addon/enhancer-for-youtube/
    https://chrome.google.com/webstore/detail/enhancer-for-youtube/ponfpcnoihfmfllpaingbgckeeldkhle
    https://addons.opera.com/en/extensions/details/enhancer-for-youtube/
    https://www.microsoft.com/en-us/store/p/enhancer-for-youtube-for-microsoft-edge/9n4f8m7plt38

    and for the New YouTube Layout only

    iridium For YouTube:
    https://addons.mozilla.org/en-US/firefox/addon/particle-iridium/
    https://chrome.google.com/webstore/detail/iridium/gbjmgndncjkjfcnpfhgidhbgokofegbl
    https://github.com/ParticleCore/Iridium
    https://github.com/ParticleCore/Iridium/wiki/Features

    and for the old YouTube Layout only

    https://addons.mozilla.org/en-US/firefox/addon/youtube-plus/
    https://addons.opera.com/extensions/details/particle/
    https://github.com/ParticleCore/Particle
    https://github.com/ParticleCore/Particle/wiki/Features

    i use all 3 extensions because they all can do something that the others can’t do.

    Now i know these only work on YouTube, but i only need that feature on YouTube.

    Some websites do this feature automatically.

    The extension Magic Actions is now a joke, only gets updated on Google Chrome-(Opera and Firefox have been abandoned) and the devs call people Trolls and Liars if they don’t leave a perfect 5 Star ratings and eventually remove the bad reviews-(although they don’t do this like they used to), they even have used fake accounts to leave ridiculously fake 5 star reviews.

  7. XenoSilvano said on May 17, 2018 at 12:08 am
    Reply

    after reading Rick A.’s comment and checking out the links provided, leads me to believe that the WebExtension that I tried out was ‘Iridium’, as I mentioned in my previous comment, I did not like that the YouTube video panel opens up in its own little separate browser window because it will get over shadowed by another maximised browser window, I want something that superimposes the video at a reduced size on top of the browser window that I am currently on, so that I can watch some YouTube as I am doing really monotonous work, preferably with the ability to move the ‘caption’ (a more apropriate term escapes me now) into different positions

    thanks for sharing those links Rick A., I look forward to reviewing them to see if any extension serves my needs

  8. Heimen Stoffels said on May 17, 2018 at 11:20 am
    Reply

    You don’t need Chrome Canary. I can enable it in Chrome Dev and Vivaldi (which isn’t even based on Chrome Canary, nor Dev) as well.

  9. Pierre said on May 17, 2018 at 2:45 pm
    Reply

    It already exists in Opera stable !

  10. Al said on May 19, 2018 at 11:13 pm
    Reply

    I’ve been using it in Iron browser for ages. https://www.youtube.com/watch?v=k2h5CrUQHK8

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.