| <!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 }); |
| |
| window.domAutomationController.send(true); |
| }) |
| .catch(e => { |
| window.domAutomationController.send(false); |
| }); |
| } |
| |
| function secondPictureInPicture() { |
| secondVideo.requestPictureInPicture(); |
| } |
| |
| function enterFullscreen() { |
| video.webkitRequestFullscreen(); |
| |
| video.addEventListener('webkitfullscreenchange', () => { |
| document.title = 'fullscreen'; |
| }, { once: true }); |
| } |
| |
| function changeVideoSrc() { |
| if (video.srcObject) { |
| video.srcObject.getTracks().forEach(track => track.stop()); |
| video.srcObject = null; |
| } |
| video.src = '../bigbuck.webm'; |
| 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 changeVideoSrcToNoAudioTrackVideo() { |
| video.src = '../engagement/engagement_no_audio_track.webm'; |
| video.play() |
| .then(_ => { window.domAutomationController.send(true); }) |
| .catch(e => { window.domAutomationController.send(false); }); |
| } |
| |
| function addVisibilityChangeEventListener() { |
| document.addEventListener('visibilitychange', () => { |
| document.title = document.visibilityState; |
| }); |
| } |
| |
| function addPauseEventListener() { |
| video.addEventListener('pause', () => { |
| document.title = 'pause'; |
| }); |
| } |
| |
| function addPlayEventListener() { |
| video.addEventListener('play', () => { |
| document.title = 'play'; |
| }); |
| } |
| |
| function setMediaSessionActionHandler(name) { |
| navigator.mediaSession.setActionHandler(name, _ => { |
| document.title = name; |
| }); |
| } |
| |
| function unsetMediaSessionActionHandler(name) { |
| navigator.mediaSession.setActionHandler(name, null); |
| } |
| |
| function addVolumeChangeEventListener() { |
| video.addEventListener('volumechange', () => { |
| document.title = 'muted: ' + video.muted; |
| }); |
| } |
| |
| function addPictureInPictureEventListeners() { |
| video.addEventListener('enterpictureinpicture', () => { |
| document.title = 'enterpictureinpicture'; |
| }); |
| video.addEventListener('leavepictureinpicture', () => { |
| document.title = 'leavepictureinpicture'; |
| }); |
| } |
| |
| function tryToEnterPictureInPictureAfterLeaving() { |
| video.addEventListener('leavepictureinpicture', () => { |
| video.requestPictureInPicture() |
| .then(_ => { document.title = 'entered Picture-in-Picture after leaving'; }) |
| .catch(e => { document.title = 'failed to enter Picture-in-Picture after leaving'; }); |
| }); |
| } |
| </script> |
| </html> |