HTMLVideoElement: enterpictureinpicture event

The enterpictureinpicture event is fired when the HTMLVideoElement enters picture-in-picture mode successfully.

These examples add an event listener for the HTMLVideoElement's enterpictureinpicture event, then post a message when that event handler has reacted to the event firing.

Using addEventListener():

const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener('enterpictureinpicture', onEnterPip, false);

button.onclick = function() => {
  video.requestPictureInPicture();
}

Using the onenterpictureinpicture event handler property:

const video = document.querySelector('#video');
const button = document.querySelector('#button');

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = function() => {
  video.requestPictureInPicture();
}

• HTMLVideoElement
• Picture-in-Picture_API