9ccd6aa0dd
* feat: enable picture in picture mode for video tags * test: add test to verify picture in picture support * lint: fix indent * fix: clean up after rebase * test: update test with 16:9 test video * fix: .paches after rebase
51 lines
5.6 KiB
HTML
51 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
</head>
|
|
<body>
|
|
<video id="video" controls playsinline
|
|
src="data:video/webm;base64,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">
|
|
</video>
|
|
|
|
<script>
|
|
const togglePIP = async () => {
|
|
if (video !== document.pictureInPictureElement)
|
|
await video.requestPictureInPicture()
|
|
else
|
|
await document.exitPictureInPicture()
|
|
}
|
|
|
|
window.runTest = (shouldBeEnabled) => new Promise(async (resolve, reject) => {
|
|
try {
|
|
if (document.pictureInPictureEnabled) {
|
|
if (!shouldBeEnabled) {
|
|
resolve(false)
|
|
return
|
|
}
|
|
|
|
let windowSizeOk = false
|
|
video.addEventListener('enterpictureinpicture', (event) => {
|
|
const pipWindow = event.pictureInPictureWindow
|
|
if (pipWindow.width > 0 && pipWindow.height > 0) {
|
|
windowSizeOk = true
|
|
}
|
|
})
|
|
|
|
video.addEventListener('leavepictureinpicture', (event) => {
|
|
resolve(windowSizeOk)
|
|
})
|
|
|
|
await togglePIP()
|
|
setTimeout(async () => {
|
|
await togglePIP()
|
|
}, 500)
|
|
} else {
|
|
resolve(!shouldBeEnabled)
|
|
}
|
|
} catch (e) {
|
|
resolve(false)
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|