The Document
method exitPictureInPicture()
requests that a video contained in this document, which is currently floating, be taken out of picture-in-picture mode, restoring the previous state of the screen. This usually reverses the effects of a previous call to HTMLVideoElement.requestPictureInPicture()
.
A Promise
, which is resolved once the user agent has finished exiting picture-in-picture mode. If an error occurs while attempting to exit fullscreen mode, the catch()
handler for the promise is called.
This example causes the current document to exit picture-in-picture mode whenever the mouse button is clicked within it.
document.onclick = (event) => {
if (document.pictureInPictureElement) {
document
.exitPictureInPicture()
.then(() => console.log("Document Exited from Picture-in-Picture mode"))
.catch((err) => console.error(err));
} else {
video.requestPictureInPicture();
}
};
Note that if you want to track which video on your page is currently playing in picture-in-picture mode, you should listen to the enterpictureinpicture
and exitpictureinpicture
events on the HTMLVideoElement
element(s) in question. Alternatively, you can check whether Document.pictureInPictureElement
refers to the current HTMLVideoElement
element.