Closed cadubentzen closed 5 years ago
The resize
event is fired on a PictureInPictureWindow at pictureInPictureElement
. The at
means pictureInPictureElement
is the target
. See https://dom.spec.whatwg.org/#concept-event-fire
In https://w3c.github.io/picture-in-picture/#eventdef-pictureinpicturewindow-resize, it says
resize Fired on a PictureInPictureWindow when it changes size.
let pipWindow;
videoElement.addEventListener('enterpictureinpicture', function(event) {
pipWindow = event.pictureInPictureWindow;
console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);
pipWindow.addEventListener('resize', onPipWindowResize);
});
videoElement.addEventListener('leavepictureinpicture', function(event) {
pipWindow.removeEventListener('resize', onPipWindowResize);
});
function onPipWindowResize(event) {
console.log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`);
// TODO: Change video quality based on Picture-in-Picture window size.
}
I think I got a bit lost in the semantics.
Thank you for the clarification, in special for the citation of the DOM specification 😄
Reading the spec, I noticed in section 4.4:
However, from my understanding, the resize event is fired at the PictureInPictureWindow instance, and not pictureInPictureElement?