Какво е 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", браузърът извиква собствения requestPictureInPicture() API на този елемент.
  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 адрес и кликнете "Заредете видео". Бутонът става активен, след като източникът е зададен.

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