JavaScript Picture-in-Picture API

By  on  

As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom codecs, browser extensions, and Flash. The latest awesome media feature I'm excited about on the web is Picture-in-Picture, a native web API that displays docked video. Let's have a look at how it works!

Benefits of Picture-in-Picture

Before using Picture-in-Picture, it's important to know why to use it and the benefits you get:

  • No need to create your own docked video element when the user scrolls -- the browser does it for you!
  • Big performance, usability, and maintenance win
  • The docked video displays above all tabs in your browser, not just the tab it was launched in
  • Stays in PiP mode until you change pages

Detect Picture-in-Picture Support

Before using any API it's best to ensure the feature is supported and enabled; for that the browser exposes document.pictureInPictureEnabled, as well as a per-video attribute:

if(
    document.pictureInPictureEnabled && 
    !videoElement.disablePictureInPicture
) {
    // Yay, we can use the feature!
}

With the browser supporting the API, it's time to get started!

Launching Picture-In-Picture

Before launching into picture-in-picture, it's important to first check that we aren't already in PiP:

if(!document.pictureInPictureElement) {
    videoElement.requestPictureInPicture();
}

Once we confirm that PiP isn't being used, we can launch PiP by calling requestPictureInPicture() on the HTMLVideoElement.

Exiting Picture-in-Picture

To exit Picture-in-Picture mode, you can call exitPictureInPicture():

document.exitPictureInPicture();

The PiP window will be removed from the bottom of your browser.

Safe Picture-in-Picture Function

Bringing together the code samples provided, we can put together a safe Picture-in-Picture utility function:

function enterPictureInPicture(videoElement) {
    if(
        document.pictureInPictureEnabled && 
        !videoElement.disablePictureInPicture) {
            try {
                if (document.pictureInPictureElement) {
                    document.exitPictureInPicture();
                }
                videoElement.requestPictureInPicture();
            } catch(err) {
                console.error(err);
            }
    }
}

This function can safely put your video into Picture-in-Picture while protecting you from errors or videos already PiP.

Picture-in-Picture Events

Along with the functionality to enter and exit Picture-in-Picture, a set of JavaScript events are emitted during each step:

  • enterpictureinpicture: fired on the HTMLVideoElement that was placed into Picture-in-Picture
  • leavepictureinpicture: fired on the HTMLVideoElement for which PiP was exited

Here's a quick example of each:

$("#myVideo").addEventListener("enterpictureinpicture", e => {
    // Entered PiP!
});

$("#myVideo").addEventListener("leavepictureinpicture", e => {
    // Exited PiP!
});

Picture-in-Picture mode is an amazing API to allow users to consume video content as they explore other tabs or simply navigate within your page. Coupled with the scroll event or even with Intersection Observer API, Picture-in-Picture is a powerful feature your users will love!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

Discussion

  1. doesn’t seem to work in Firefox…

    • Adam

      You can check the support here: https://caniuse.com/#feat=picture-in-picture

      Looks like Firefox: “Partial support in Firefox refers to the fact that Mozilla provides an equivalent proprietary feature, which allows users to use Picture-in-Picture mode for all playing videos.”

  2. Very handy when I have my end user hat on: Google made an extension for Chrome which just puts a page’s element in Picture-in-Picture via keyboard shortcut. This is pretty great since many players don’t support PiP out of the box yet.

    https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg

  3. Works like a charm except on Firefox. where it isn’t completely compatible yet. Thank you so much or sharing! We really appreciate these tricks your share!

  4. Very handy. Is there a way to have multiple Picture-in-Picture’s running?

  5. johnnyysmith

    That’s a lot!It worked for me. That’s what I was looking for

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!