javascript - 如何获取 Chrome 的画中画元素的拖动坐标？

Question

我能够使用画中画 API 但我只是想知道我们是否可以在 chrome 浏览器桌面中附加事件处理程序，例如拖动或调整大小。我试图将画中画选项卡视为普通 DOM 元素并附加事件处理程序，但它不起作用

我的尝试

 listenForResize = e =>{
        console.log(e,'It is not working')
    };
    componentDidMount() {
        let cam = this.refs.pipCam;

        cam.addEventListener('drag', this.listenForResize )

    }

https://developers.google.com/web/updates/2017/09/picture-in-picture

Answer 1

传递给HTMLVideoElement.requestPictureInPicture返回的已解析 Promise 的PictureInPictureWindow确实公开了属性和width处理程序。但是，没有关于屏幕中的位置：heightonresize

pip_btn.onclick = (evt) =>
  video.requestPictureInPicture()
    .then((pip_window) => {
      console.log(pip_window);
      pip_window.onresize = (evt) => {
        console.log(pip_window.width, pip_window.height);
      };
    })
    .catch(console.error);

<video id="video" controls="" muted loop autoplay src="https://media.w3.org/2010/05/sintel/trailer.webm"></video>
<button id="pip_btn">Enter PiP</button>