<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Autopip Video Picture-in-Picture</title>
</head>
<body>
<video id="video" controls loop>
<source src="../bigbuck.webm">
</video>
</body>
<script>
const video = document.getElementById('video');
function playVideo() {
navigator.mediaSession.playbackState = "playing";
video.play();
}
function pauseVideo() {
video.pause();
navigator.mediaSession.playbackState = "paused";
}
function openPip(details) {
video.requestPictureInPicture();
}
navigator.mediaSession.setActionHandler('enterpictureinpicture', openPip);
</script>