Что такое Picture-in-Picture (PiP)?

Picture-in-Picture — это функция браузера, которая позволяет вывести видео из текущей вкладки в небольшое плавающее окно, которое остаётся поверх всех остальных элементов на экране. Вы можете перемещать его в любое место, изменять размер и продолжать смотреть видео, одновременно просматривая другие вкладки, создавая документы или выполняя любые другие действия на компьютере — видео остаётся видимым всё время.

PiP встроена во все современные настольные браузеры (Chrome, Edge, Firefox, Safari) через стандартизированный веб-API. Она не требует плагинов или расширений, а плавающее окно полностью управляется операционной системой, поэтому оно сохраняется даже при переключении между приложениями.

Описание инструмента

Этот инструмент загружает любой прямой URL видео в плеер HTML5 и позволяет запустить его в режиме Picture-in-Picture одним щелчком. Вставьте ссылку на общедоступный видеофайл, загрузите его и нажмите «Запустить Picture-in-Picture», чтобы отделить видео в плавающее окно.

Поддерживаемые форматы

Любой видеоформат, поддерживаемый встроенным плеером HTML5 вашего браузера:

  • MP4 (H.264 / H.265) — универсально поддерживается
  • WebM (VP8 / VP9 / AV1) — поддерживается в Chrome, Firefox, Edge
  • OGG / OGV (Theora) — поддерживается в Firefox и Chrome
  • MOV — поддерживается в Safari; ограниченная поддержка в других браузерах
  • M4V — поддерживается в большинстве браузеров на основе Chromium и Safari

Видеофайл должен быть доступен по HTTP/HTTPS, и сервер должен разрешать кросс-доменные запросы (CORS), чтобы браузер мог его загрузить.

Как это работает

  1. Введённый URL загружается как атрибут src стандартного элемента HTML5 <video>.
  2. Когда вы нажимаете «Запустить Picture-in-Picture», браузер вызывает встроенный API requestPictureInPicture() для этого элемента.
  3. Браузер отделяет видео в плавающее окно, управляемое менеджером окон ОС.
  4. Нажатие на «Выход из Picture-in-Picture» (или кнопку закрытия в плавающем окне) вызывает exitPictureInPicture() и возвращает видео в плеер.

Возможности

  • Запуск и выход из PiP одним щелчком прямо из браузера — расширения не требуются
  • Работает с любым общедоступным прямым URL видео
  • Плеер с соотношением сторон 16:9 и полными встроенными элементами управления (воспроизведение, пауза, перемотка, громкость, полноэкранный режим)
  • Автоматически начинает воспроизведение перед входом в PiP, чтобы видео не было заморожено
  • Определяет, если PiP не поддерживается в текущем браузере, и выводит понятное сообщение

Варианты использования

  • Смотрите видео-урок в плавающем окне, одновременно следуя инструкциям в редакторе кода или другой вкладке браузера
  • Отслеживайте прямую трансляцию или записанный видеопоток во время работы в других приложениях
  • Держите видеоссылку видимой при редактировании документов, электронных таблиц или файлов дизайна

Ограничения

  • Сервер видео должен разрешать загрузку файла с другого источника (требуются заголовки CORS). Многие CDN и хосты прямых файлов это уже поддерживают; некоторые — нет.
  • PiP доступна не во всех браузерах — в частности, некоторые мобильные браузеры и старые версии настольных браузеров не поддерживают этот API.
  • Форматы потоковых плейлистов, такие как HLS (.m3u8) и DASH (.mpd), не поддерживаются напрямую; работают только URL-адреса прогрессивной загрузки.

Часто задаваемые вопросы

Почему видео не загружается? Сервер, на котором размещено видео, может не включать заголовок Access-Control-Allow-Origin, который разрешает кросс-доменную загрузку, или URL может требовать аутентификации. Попробуйте прямую ссылку на общедоступный видеофайл.

Почему кнопка PiP отключена? Сначала необходимо загрузить видео, введя URL и нажав «Загрузить видео». Кнопка становится активной после установки источника.

Работает ли это на мобильных устройствах? API Picture-in-Picture имеет ограниченную поддержку в мобильных браузерах. На iOS Safari поддерживает PiP для видео, но поведение может отличаться. На Android Chrome может поддерживать это в зависимости от версии и параметров ОС.