React JS检测关闭按钮PiP(图中所示)

Question

在大多数浏览器中，尤其是在Chrome上，我在尝试检测onClick或某种类型的PIP功能的事件侦听器时遇到了问题。

阅读MDN文档并实施他们的建议被证明是不成功的

https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/leavepictureinpicture_event

这是我到目前为止的代码，它给了我一个空错误的无法读取属性，因为pipButton没有addEventListener:

const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');
pipButton.addEventListener('click', () => {
if (document.pictureInPictureElement) {
document
.exitPictureInPicture()
.catch(error => {
// Error handling
})
} else {
// Request Picture-in-Picture
console.log('CLOSED PIP')
}
});

Answer 1

pipButton.addEventListener('leavepictureinpicture', function(event: any) {
console.log('Left PiP');
if (document.pictureInPictureElement) {
document.exitPictureInPicture().catch((error: any) => {
// Error handling
console.log('error :>> ', error);
});
}
});