<!DOCTYPE html>
<video preload=none poster='../../banners/image-512px.png'>
<source src='../bigbuck.webm' type='video/webm'>
</video>
<script>
const video = document.querySelector('video');
async function enterPictureInPicture() {
await video.play();
await video.requestPictureInPicture();
video.addEventListener('leavepictureinpicture', () => {
document.title = 'leavepictureinpicture';
}, { once: true });
return true;
}
async function changeSrcAndLoad() {
document.querySelector('source').src = '../bear-640x360-av-enc_av.webm';
video.load();
await _waitForMetadata();
return true;
}
function _waitForMetadata() {
return new Promise(resolve => {
if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
resolve();
return;
}
video.addEventListener('loadedmetadata', () => {
resolve();
}, { once: true });
});
}
function isInPictureInPicture() {
return document.pictureInPictureElement == video;
}
</script>