Окно режима Picture-in-Picture

Интерфейс PictureInPictureWindow представляет собой объект, способный программно получить width, height и resize event плавающего видеоокна.

Объект с этим интерфейсом получается с помощью значения возвращаемого promise HTMLVideoElement.requestPictureInPicture().

Интерфейс PictureInPictureWindow не наследует никаких свойств.

PictureInPictureWindow.width Только для чтения

Определяет ширину плавающего видеоокна.

PictureInPictureWindow.height Только для чтения

Определяет высоту плавающего видеоокна.

Интерфейс PictureInPictureWindow не наследует никаких методов.

Интерфейс PictureInPictureWindow не наследует никаких событий.

resize

Отправляется объекту PictureInPictureWindow при изменении размера плавающего видеоокна.

При наличии <button> и <video>, нажатие кнопки переведет видео в режим Picture-in-Picture; после этого мы присоединим событие для вывода размеров плавающего видеоокна в консоль.

const button = document.querySelector("button");
const video = document.querySelector("video");

function printPipWindowDimensions(evt) {
  const pipWindow = evt.target;
  console.log(
    `The floating window dimensions are: ${pipWindow.width}x${pipWindow.height}px`,
  );
  // will print:
  // The floating window dimensions are: 640x360px
}

button.onclick = () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.onresize = printPipWindowDimensions;
  });
};

• API режима Picture-in-Picture