blob: 57adcaebd12243f68568deb17e1a39664dd40351 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Picture-in-Picture Window Size Test</title>
</head>
<body>
<video controls preload=auto src='../bigbuck.webm'></video>
</body>
<script>
const video = document.querySelector('video');
// This video is created here in order to be used in
// `secondPictureInPicture()`. Unfortunately, the `requestPictureInPicture()`
// method has to be called during a user activation event handler so it's not
// possible to load the video on-demand.
const secondVideo = document.createElement('video');
secondVideo.src = '../bigbuck.webm';
secondVideo.load();
function requestPictureInPictureAndDisable() {
enterPictureInPictureInternal();
video.disablePictureInPicture = true;
}
function enterPictureInPicture() {
enterPictureInPictureInternal();
}
function exitPictureInPicture() {
document.exitPictureInPicture();
}
function isInPictureInPicture() {
window.domAutomationController.send(document.pictureInPictureElement == video);
}
function isPaused() {
window.domAutomationController.send(video.paused);
}
function enterPictureInPictureInternal() {
video.requestPictureInPicture()
.then(win => {
win.addEventListener('resize', () => {
document.title = 'resized';
}, { once: true });
video.addEventListener('leavepictureinpicture', () => {
document.title = 'left';
}, { once: true });
video.addEventListener('pictureinpicturecontrolclick', function(event) {
document.title = event.id;
}, { once: true });
window.domAutomationController.send(true);
})
.catch(e => {
window.domAutomationController.send(false);
});
}
function setControls(ids) {
try{
var controls = [];
Array.from(ids).forEach(id => {
controls.push({
id: id,
label: "label_" + id,
icons: [{
src: "icon.png",
sizes: "144x144",
type: "image/png",
}],
});
});
video.setPictureInPictureControls(controls);
return true;
} catch(error) {
return false;
}
}
function secondPictureInPicture() {
secondVideo.requestPictureInPicture();
}
function enterFullscreen() {
video.webkitRequestFullscreen();
video.addEventListener('webkitfullscreenchange', () => {
document.title = 'fullscreen';
}, { once: true });
}
function changeVideoSrc() {
video.src = video.src;
video.play()
.then(_ => { window.domAutomationController.send(true); })
.catch(e => { window.domAutomationController.send(false); });
}
function changeVideoSrcToMediaStream() {
const canvas = document.createElement('canvas');
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);
video.srcObject = canvas.captureStream();
video.play()
.then(_ => { window.domAutomationController.send(true); })
.catch(e => { window.domAutomationController.send(false); });
}
function addVisibilityChangeEventListener() {
document.addEventListener('visibilitychange', () => {
document.title = document.visibilityState;
});
}
</script>
</html>