Auto Picture-in-Picture Sample

Available in Chrome 73+ | View on GitHub | Browse Samples

Background

Web apps for video meetings will benefit by allowing picture-in-picture when users switch back and forth between web apps and other applications or tabs. This is currently not possible because a user gesture is required to enter picture-in-picture.

To support these use cases, a new autopictureinpicture attribute is added to the list of content attributes for video elements. This feature applies only to Progressive Web Apps users have installed on Desktop.

Note: In Chrome 73, it is available for trials so that websites can use it without any experimental flag.

HTML Snippet

<video id="video" autopictureinpicture></video>

Live Output

JavaScript Snippet

if (window.matchMedia("(display-mode: browser)").matches)
  log('Warning! Install this sample app first.');
else {
  // If Progressive Web App is installed and running in a window,
  // request user camera and show its stream in the video.
  navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    return video.play();

    // User can now show/hide window and video will enter and exit
    // automatically Picture-in-Picture when the document's visibility
    // changes.
  });
}

video.addEventListener('enterpictureinpicture', function(event) {
  log('> Video entered Picture-in-Picture');
});

video.addEventListener('leavepictureinpicture', function(event) {
  log('> Video left Picture-in-Picture');
});

/* Feature support */

if (!('autoPictureInPicture' in HTMLVideoElement.prototype)) {
  log('Warning! Auto Picture-in-Picture is not available.');
}