Picture-in-Picture Javascript and Html example

Picture-in-Picture Javascript and Html , Chrome latest 70 version support 

#PictureinPicture #javascript #Chrome70

Your Html <style>
	video { background: #1e2327; border-radius: 4px; width: 100%; }
	button { margin: 4px 0; }
	</style>
	<video id="video" controls playsinline
	src="https://storage.googleapis.com/media-session/caminandes/short.mp4"
	poster="https://storage.googleapis.com/media-session/caminandes/artwork-512.png"></video>
	<button id="togglePipButton">Toggle Picture-in-Picture</button>

Your Javascript Code

let pipWindow;

togglePipButton.addEventListener('click', async function(event) {
  log('Toggling Picture-in-Picture...');
  togglePipButton.disabled = true;
  try {

    if (video !== document.pictureInPictureElement)
      await video.requestPictureInPicture();
    else
      await document.exitPictureInPicture();

  } catch(error) {
    log(`> Argh! ${error}`);
  } finally {
    togglePipButton.disabled = false;
  }
});

// Note that this can happen if user clicked the "Toggle Picture-in-Picture"
// button but also if user clicked some browser context menu or if
// Picture-in-Picture was triggered automatically for instance.
video.addEventListener('enterpictureinpicture', function(event) {
  log('> Video entered Picture-in-Picture');

  pipWindow = event.pictureInPictureWindow;
  log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);

  pipWindow.addEventListener('resize', onPipWindowResize);
});

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

  pipWindow.removeEventListener('resize', onPipWindowResize);
});

function onPipWindowResize(event) {
  log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`);
}

/* Feature support */

if ('pictureInPictureEnabled' in document) {
  // Set button ability depending on whether Picture-in-Picture can be used.
  setPipButton();
  video.addEventListener('loadedmetadata', setPipButton);
  video.addEventListener('emptied', setPipButton);
} else {
  // Hide button if Picture-in-Picture is not supported.
  togglePipButton.hidden = true;
}

function setPipButton() {
  togglePipButton.disabled = (video.readyState === 0) ||
                             !document.pictureInPictureEnabled ||
                             video.disablePictureInPicture;
}

picture in picture mode tutorial with example