如何获取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 that gets passed to the resolved Promise returned by HTMLVideoElement.requestPictureInPicture does expose width and height properties and an 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>

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

How to get dragging coordinates for Chrome's Picture in picture Element?

javascript

google-chrome

picture-in-picture