Как получить координаты перетаскивания элемента Chrome «картинка в картинке»? - PullRequest
Новая
       24

Как получить координаты перетаскивания элемента Chrome «картинка в картинке»?

0 голосов
/ 08 июля 2019

Мне удалось использовать API «картинка в картинке». Но мне просто интересно, можем ли мы прикрепить обработчики событий, такие как перетаскивание или изменение размера, на рабочем столе браузера Chrome. Я пытался обработать вкладку Picture in picture как обычный элемент 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

1 Ответ

1 голос
/ 08 июля 2019

PictureInPictureWindow , которое передается разрешенному Обещанию, возвращенному 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>
...