HTMLVideoElement: метод requestPictureInPicture()

Метод HTMLVideoElement requestPictureInPicture() асинхронно запрашивает отображение видео в режиме "картинка в картинке".

Гарантии, что видео будет отображено в режиме "картинка в картинке", нет. Если разрешение на вход в этот режим получено, возвращаемый Promise разрешится, и видео получит событие enterpictureinpicture, уведомляющее о переходе в режим "картинка в картинке".

Нет.

Promise, который разрешится в объект PictureInPictureWindow, который можно использовать для отслеживания изменения размеров плавающего окна пользователем.

NotSupportedError DOMException

Выбрасывается, если функция не поддерживается (например, отключена пользовательскими настройками или ограничениями платформы).

SecurityError DOMException

Выбрасывается, если функция заблокирована политикой разрешений Permissions Policy.

InvalidStateError DOMException

Выбрасывается, если readState элемента видео HAVE_NOTHING, или если у элемента видео нет видео дорожки, или если атрибут disablePictureInPicture элемента видео true.

NotAllowedError DOMException

Выбрасывается, если document.pictureInPictureElement null, а документ не имеет временной активации.

Временная активация пользователя требуется. Пользователь должен взаимодействовать с страницей или элементом интерфейса для работы этой функции.

В этом примере запрашивается переход видео в режим "картинка в картинке", и устанавливается обработчик события для изменения размеров плавающего окна.

function enterPictureInPicture() {
  videoElement.requestPictureInPicture().then((pictureInPictureWindow) => {
    pictureInPictureWindow.addEventListener(
      "resize",
      () => onPipWindowResize(),
      false,
    );
  });
}

• Элемент <video>
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement
• :picture-in-picture