PiP js
<video id="video" src="https://example.com/file.mp4"></video>
<button id="togglePipButton"></button>
<script>
const video = document.getElementById("video");
const togglePipButton = document.getElementById("togglePipButton");
// Hide button if Picture-in-Picture is not supported or disabled.
togglePipButton.hidden =
!document.pictureInPictureEnabled || video.disablePictureInPicture;
togglePipButton.addEventListener("click", async () => {
// If there is no element in Picture-in-Picture yet, let’s request
// Picture-in-Picture for the video, otherwise leave it.
try {
if (document.pictureInPictureElement) {
await video.requestPictureInPicture();
} else {
await document.exitPictureInPicture();
}
} catch (err) {
// Video failed to enter/leave Picture-in-Picture mode.
}
});
</script>