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返回的已解决Promise的HTMLVideoElement.requestPictureInPicture确实公开了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>

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

1 个答案: