API «Картинка в картинке»

API «Картинка в картинке» позволяет веб-сайтам создавать плавающее окно видео, которое всегда находится поверх других окон. Это позволяет пользователям продолжать просмотр медиа, взаимодействуя с другими сайтами или приложениями на устройстве.

PictureInPictureWindow

Представляет плавающее окно видео; содержит свойства width и height, а также обработчик события onresize.

PictureInPictureEvent

Представляет события, связанные с режимом «картинка в картинке», включая enterpictureinpicture, leavepictureinpicture и resize.

API «Картинка в картинке» добавляет методы к интерфейсам HTMLVideoElement и Document для переключения плавающего окна видео.

HTMLVideoElement.requestPictureInPicture()

Запрашивает, чтобы пользовательский агент перевел видео в режим «картинка в картинке»

Document.exitPictureInPicture()

Запрашивает, чтобы пользовательский агент вернул элемент в режим «картинка в картинке» в исходное положение.

API «Картинка в картинке» дополняет интерфейсы HTMLVideoElement, Document и ShadowRoot свойствами, которые можно использовать для определения поддержки и доступности режима плавающего окна видео, активен ли в настоящее время режим «картинка в картинке» и какое видео плавает.

HTMLVideoElement.disablePictureInPicture

Свойство disablePictureInPicture даст пользователю указание не предлагать режим «картинка в картинке» или не запрашивать его автоматически.

Document.pictureInPictureEnabled

Свойство pictureInPictureEnabled указывает, можно ли использовать режим «картинка в картинке». Это false если режим «картинка в картинке» недоступен по какой-либо причине (например, функция "picture-in-picture" запрещена или режим «картинка в картинке» не поддерживается).

Document.pictureInPictureElement / ShadowRoot.pictureInPictureElement

Свойство pictureInPictureElement показывает, какой Element в данный момент отображается в плавающем окне (или в тени DOM). Если это null, в документе (или тени DOM) нет узла, который в настоящее время находится в режиме «картинка в картинке».

API «Картинка в картинке» определяет три события, которые могут использоваться для обнаружения переключения режима «картинка в картинке» и изменения размера плавающего окна видео.

enterpictureinpicture

Отправляется элементу HTMLVideoElement, когда он переходит в режим «картинка в картинке».

leavepictureinpicture

Отправляется элементу HTMLVideoElement, когда он выходит из режима «картинка в картинке».

resize

Отправляется элементу PictureInPictureWindow, когда он изменяет размер.

Если обработчики действий с медиа были настроены с помощью API «Сессия медиа», соответствующие элементы управления этими действиями будут добавлены браузером в наложение «картинка в картинке». Например, если установлено действие "nexttrack", в представлении «картинка в картинке» может отображаться кнопка пропуска. Поддержка добавления пользовательских кнопок или элементов управления HTML отсутствует.

Псевдокласс :picture-in-picture CSS псевдокласса соответствует элементу видео, который в данный момент находится в режиме «картинка в картинке», что позволяет настраивать таблицы стилей для автоматической корректировки размера, стиля или макета содержимого, когда видео переключается между режимами «картинка в картинке» и традиционным представлением.

Доступность режима «картинка в картинке» можно контролировать с помощью Политики разрешений. Функция режима «картинка в картинке» идентифицируется строкой "picture-in-picture", а значение по умолчанию для списка разрешенных значений – *, что означает, что режим «картинка в картинке» разрешен в контекстах документов верхнего уровня, а также для вложенных контекстов просмотра, загружаемых из того же источника, что и основной документ.

В данном примере видео представлено на веб-странице. Нажав кнопку ниже, пользователь может переключить плавающее окно видео.

Этот код вызывается обработчиком щелчка, когда пользователь нажимает кнопку «Переключить режим "картинка в картинке"»:

function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else if (document.pictureInPictureEnabled) {
    video.requestPictureInPicture();
  }
}

Этот блок начинает с проверки значения атрибута document pictureInPictureElement.

Если значение не null, это элемент, который сейчас находится в режиме «картинка в картинке», то есть в плавающем окне. Мы вызываем document.exitPictureInPicture(), чтобы вернуть видео в исходное положение.

Если значение null, значит, ни одно видео не находится в плавающем окне. Поэтому мы можем запросить, чтобы видео вошло в режим «картинка в картинке». Для этого мы вызываем HTMLVideoElement.requestPictureInPicture() для элемента <video>.

• HTMLVideoElement.requestPictureInPicture()
• HTMLVideoElement.disablePictureInPicture
• Document.pictureInPictureEnabled
• Document.exitPictureInPicture()
• Document.pictureInPictureElement
• :picture-in-picture
• API «Изображение внутри изображения» для документа