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

Jad Joubran

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

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

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

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

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

На момент написания статьи API "Картинка в картинке" для документов имеет ограниченную доступность.

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

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

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

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

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

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

Для реализации этого сначала проверьте поддержку браузером:

const isPipSupported = "documentPictureInPicture" in window;

Теперь вы можете использовать эту переменную для обертывания любых вызовов documentPictureInPicture или для досрочного выхода из функции, которая использует Document 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.

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

Отступать

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

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

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

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

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

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

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