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

PictureInPictureWindow它被传递给 HTMLVideoElement.requestPictureInPicture 返回的已解决的 Promise确实公开 width 和 height 属性以及 onresize处理程序。但是，没有任何关于屏幕位置的信息:

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>