The Picture-in-Picture API for Video

Picture-in-Picture (PiP) API enables video to play in a floating window while users navigate elsewhere; 1. Check support via 'pictureInPictureEnabled' and video's disablePictureInPicture attribute; 2. Trigger PiP with requestPictureInPicture() on user gesture; 3. Handle state changes with enterpictureinpicture and leavepictureinpicture events; the feature requires user interaction, allows only one PiP window at a time, has limited mobile support, may exclude DRM content, and offers no styling control, but enhances multitasking when used appropriately with proper UI feedback and support checks.

Picture-in-Picture (PiP) is a handy feature that lets users continue watching a video in a small, floating window while they navigate elsewhere on their device—like browsing another page or using a different app. On the web, this functionality is enabled through the Picture-in-Picture API, a relatively new but increasingly supported web API that gives developers control over PiP behavior for <video></video> elements.

Here’s what you need to know to use it effectively.

What the PiP API Does

The Picture-in-Picture API allows a web page to programmatically enter and exit PiP mode for a video. Once activated, the video pops out of the browser into a small movable window that stays on top of other apps, letting users multitask without interrupting playback.

It works only with <video></video> elements and requires user interaction to initiate (for security and user experience reasons). Browsers like Chrome, Edge, and some versions of Safari support it, but Firefox and others do not yet.

How to Use the PiP API

Using the API is straightforward. Here are the key parts:

1. Check Support and Availability

Before trying to use PiP, check if the browser supports it:

if ('pictureInPictureEnabled' in document) {
  console.log('PiP is supported!');
}

You can also check if a specific video can enter PiP:

if (!video.disablePictureInPicture) {
  // Video is allowed to go into PiP
}

Note: Use the disablePictureInPicture attribute on the <video> tag to prevent PiP if needed.

2. Request PiP Mode

To enter PiP, call requestPictureInPicture() on the video element:

async function openPiP() {
  try {
    await video.requestPictureInPicture();
  } catch (err) {
    console.error("Failed to enter PiP:", err);
  }
}

This must be triggered by a user gesture (like a click), or it will fail.

3. Handle PiP State Changes

You can listen for when PiP starts or ends:

video.addEventListener('enterpictureinpicture', (event) => {
  console.log('Entered PiP');
  // Adjust UI, e.g., hide controls
});

video.addEventListener('leavepictureinpicture', (event) => {
  console.log('Exited PiP');
  // Restore UI
});

These events help keep your interface in sync.

Practical Example: Add a PiP Button

<video id="myVideo" controls>
  <source src="demo.mp4" type="video/mp4">
</video>
<button id="pipButton">Toggle PiP</button>

const video = document.getElementById('myVideo');
const pipButton = document.getElementById('pipButton');

pipButton.addEventListener('click', async () => {
  if (document.pictureInPictureElement) {
    // Exit if already in PiP
    await document.exitPictureInPicture();
  } else {
    // Enter PiP
    await video.requestPictureInPicture();
  }
});

// Disable button when PiP isn't available
pipButton.disabled = !document.pictureInPictureEnabled;

This creates a simple toggle button that respects the current PiP state.

Important Notes and Limitations

• User gesture required: You can’t auto-start PiP when a page loads.
• Only one PiP window at a time: If another video (or app) is in PiP, the current one will exit.
• Mobile support is limited: Most mobile browsers don’t support PiP due to UI constraints.
• Not all videos can enter PiP: DRM-protected content or videos with certain restrictions may be blocked.
• Styling limitations: The PiP window is controlled by the OS/browser, so you can’t customize its appearance.

Conclusion

The Picture-in-Picture API is a powerful but simple tool for enhancing user experience with video content. By letting users keep videos visible while browsing, it adds convenience—especially for tutorials, videos, or live streams.

Use it thoughtfully: provide clear controls, respect user intent, and always check for support. With growing browser adoption, PiP is becoming a standard feature for modern web video.

Basically, it’s not magic—just a small API that makes multitasking a lot smoother.

The above is the detailed content of The Picture-in-Picture API for Video. For more information, please follow other related articles on the PHP Chinese website!