HTMLVideoElement: enterpictureinpicture

Want more browser support for this feature? Tell us why.

enterpictureinpicture HTMLVideoElement

addEventListener()

addEventListener("enterpictureinpicture", (event) => {});

onenterpictureinpicture = (event) => {};

PictureInPictureEvent Event

Event PictureInPictureEvent

Event

HTMLVideoElement leavepictureinpicture

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 = () => {
  video.requestPictureInPicture();
};

onenterpictureinpicture :

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

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

video.onenterpictureinpicture = onEnterPip;

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


Picture-in-Picture # eventdef-htmlvideoelement-enterpictureinpicture
Picture-in-Picture # dom-htmlvideoelement-onenterpictureinpicture

MDN

MDN 20241018

GitHub