<!DOCTYPE html>
<html>
<head>
<title>Picture-in-Picture iframe Test</title>
</head>
<body>
<video controls preload=auto src='../bigbuck.webm'></video>
</body>
<script>
const video = document.querySelector('video');
async function enterPictureInPicture() {
await _waitForMetadata();
await video.requestPictureInPicture();
return true;
}
function _waitForMetadata() {
return new Promise(resolve => {
if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
resolve();
return;
}
video.addEventListener('loadedmetadata', () => {
resolve();
}, { once: true });
});
}
</script>
</html>