Откройте для себя интересные варианты использования с помощью API Document Picture-in-Picture.

Джад Жубран

Опубликовано: 4 марта 2025 г.

API Document Picture-in-Picture (Document PiP API) позволяет веб-приложениям открывать плавающее окно, всегда находящееся сверху (окно «картинка в картинке»), которое может отображать любое произвольное HTML-содержимое.

Этот API создан на основе API «Картинка в картинке» для <video> , который позволяет продолжать использовать видео в окне PiP.

Поскольку API Document PiP может отображать любой произвольный HTML-контент, вы можете использовать его для открытия новых интересных вариантов использования.

Поддержка браузеров и прогрессивное улучшение

Browser Support

  • Хром: 116.
  • Край: 116.
  • Firefox: не поддерживается.
  • Сафари: не поддерживается.

Source

На момент написания API Document Picture-in-Picture имел ограниченную доступность.

Однако это не должно мешать вам использовать его с прогрессивным улучшением или плавным ухудшением .

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

Улучшение пользовательского опыта учащихся с помощью Document PiP API

LearnHTMLCSS.online — это интерактивная обучающая платформа, которая обучает семантическому и доступному HTML и CSS. Он предлагает интерактивный текстовый редактор и окно предварительного просмотра в браузере.

На следующем скринкасте показан макет приложения; экран разделен на две колонки. Первый столбец содержит редактор кода. Второй столбец содержит макет с вкладками. По умолчанию пользователь может видеть инструкции к заданию и может щелкнуть вкладку «Браузер» , чтобы просмотреть предварительный просмотр в реальном времени.

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

Чтобы реализовать это, начните с проверки поддержки браузера:

const isPipSupported = "documentPictureInPicture" in window;

Теперь вы можете использовать эту переменную для переноса любых вызовов documentPictureInPicture или для раннего возврата из функции, которая использует DocumentPicture PiP. Следующий код проверяет поддержку Document PiP, а затем открывает окно Document PiP.

async function initDocumentPip() {
  if (!isPipSupported) {
    return false;
  }

  const pipWindow = await documentPictureInPicture.requestWindow({
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

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

Пока что у вас есть пустой документ. Теперь вам нужно заполнить его контентом.

// htmlCode is the HTML code of the challenge
pipWindow.document.documentElement.innerHTML = htmlCode;

Если возникнут проблемы с кодом CSS, вам также потребуется синхронизировать CSS.

Вот и все! Теперь у вас есть кнопка развертывания, которая открывается в отдельном окне PiP. Помимо развертывания вкладки предварительного просмотра в браузере, вы также можете переместить ее на отдельный экран, если у вас есть внешний монитор, или даже изменить расположение основного веб-приложения и вкладки предварительного просмотра в браузере в виде столбцов.

Отступать

Помните, что этот API имеет ограниченную доступность. В браузерах и устройствах, где этот API не поддерживается, вам необходимо обеспечить резервное поведение (постепенное ухудшение).

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

Попробуйте такое поведение в разных браузерах: https://learnhtmlcss.online/app.html?id=2096 .

Не забывайте обращать внимание на мелкие детали во всплывающих подсказках. Если isPipSupported имеет значение true , всплывающая подсказка кнопки развертывания/свертывания переключается между входами в режим «картинка в картинке» и выходом из режима «картинка в картинке» . С другой стороны, когда isPipSupported имеет false , резервное поведение описывается с помощью Maximize и Minimize .

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

Не позволяйте ограниченной поддержке браузера ограничивать вас и не забывайте иметь достойный запасной вариант использования.

Ознакомьтесь с документацией Document PiP, чтобы изучить различные примеры и варианты использования этого API.