| <!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'); |
| let pipWindow = null; |
| let sizeCountUpdates = 0; |
| |
| function updateTitle() { |
| // TODO(mlamouri): ideally, we should send the actual size but it will be |
| // flaky and require some minutia so starting with the basics. |
| sizeCountUpdates++; |
| document.title = sizeCountUpdates; |
| } |
| |
| function enterPictureInPicture() { |
| if (video.readyState > 0) |
| return enterPictureInPictureInternal(); |
| video.addEventListener('loadedmetadata', enterPictureInPictureInternal, { once: true }); |
| } |
| |
| function enterPictureInPictureInternal() { |
| video.requestPictureInPicture().then(win => { |
| pipWindow = win; |
| updateTitle(); |
| pipWindow.addEventListener('resize', updateTitle); |
| }); |
| } |
| </script> |
| </html> |
