Режим «картинка в картинке» в браузере и его API

внешний интерфейс браузер Chrome Firefox

Хотите следить за драмами, проводя пальцем по Weibo? Хотите общаться в WeChat во время просмотра игры? Поскольку браузер поддерживает расширения, у людей всегда был такой спрос:

Chrome для просмотра видео, есть ли плагин, который может открывать окно с видео?

Различные домашние браузеры скорлупы также являются связаны с встроенным функциям «видео всплывающего окна», такие какFirefox Китай:

Зеркало Firefox

Спустя столько лет в ортодоксальные браузеры наконец-то встроена эта функция, и разработчики могут использовать вспомогательные API.

WICG, полное название — Web Incubator Community Group (Группа сообщества веб-инкубатора), основные участники — инженеры Chrome, они начали стандартизировать эту функцию, позволяющую воспроизводить всплывающие окна видео, еще год назад, и назвали ее какPicture-in-Picture(картинка в картинке), сокращенно ПиП.

Chrome в начале этого года начал реализовываться, к моменту написания этой статьи добился почти того же. В этой статье речь пойдет о двух аспектах: интерактивный PiP в Chrome реализован в настоящее время как-то так, и какой API позволяют разработчики.

Взаимодействие PiP в Chrome

Chrome официально предоставляет демо-страницуPicture-in-Picture Sample, я записал простое демонстрационное видео с этим демо:

Как видно из видео, Chrome предоставляет пункт меню для включения режима «картинка в картинке» в собственном элементе управления видео.После включения режима «картинка в картинке» видео, отображаемое в строке на исходной странице, по-прежнему занимает Исходное положение. , различные элементы управления присутствуют, но самые важные видеоматериалы были плавно перемещены в новое всплывающее окно, оставив только изображение постера и серую маску.

Мы называем всплывающее видеоокно окном PiP. Окно PiP содержит только видеоизображения, без строки заголовка и адресной строки (без хрома).window.open()Всплывающее окно, которое открывается, отличается. В то же время окно PiP не имеет полного управления видео, есть только три кнопки запуска/паузы/закрытия, а также нет элементов управления временем, индикатором выполнения и громкостью. Окно PiP также поддерживает перетаскивание для изменения размера (оно не может быть больше квадранта) и поддерживает перетаскивание в любую позицию (не показано на записи экрана, поскольку не поддерживается на момент написания этой статьи). И самое главное, окно PiP находится поверх всех окон (всегда включено). сверху), как я продемонстрировал на записи экрана, когда фокус переключается на Safari, окно PiP, открытое в Chrome, все еще находится сверху.

Другое взаимодействие, которое не отражено в записи экрана, заключается в том, что «одновременно может быть только одно окно PiP». Если режим «картинка в картинке» включен для нескольких видео на одной странице, ранее открытое видео автоматически выйдет из режима «картинка в картинке», и то же самое верно для видео на нескольких вкладках в одном окне браузера. то же самое верно для нескольких окон браузера (на момент написания Chrome не реализовал последний случай, то есть несколько окон браузера могут одновременно открывать несколько окон PiP, что, как подтверждено, является ошибкой, а не функцией) .

API, связанные с PiP

1. videoКак добавить элементыrequestPictureInPicture()

Просьба позволитьvideoЭлемент переходит в режим «картинка в картинке» и возвращает промис.Если исключения нет, значение пакета промиса будетPictureInPictureWindowObject, этот объект представляет всплывающее окно PiP, и его API будет обсуждаться отдельно позже.

async function openPiP(video) {
  try {
    const pipWindow = await video.requestPictureInPicture() // 进入画中画模式
    ...
  } catch (e) {
    console.error(e) // 处理异常
  }
})

Войти в режим PIP при каких обстоятельствах не удается? Существует пять видов ситуаций:

  1. Операционная система не поддерживает, или пользователь отключил эту функцию в настройках браузера, тоdocument.pictureInPictureEnabledсобственность вернетсяfalse
  2. Неверный видеофайл или нет видеопотока, а есть только аудиопоток
  4. Функция «картинка в картинке» отключена с помощью политики функций,В настоящее времяdocument.pictureInPictureEnabledсвойства также вернутсяfalse
  5. Текущий элемент видео проходитdisablePictureInPictureАтрибуты (как атрибуты HTML, так и атрибуты DOM) отключают функцию «картинка в картинке».

2. videoАтрибуты, добавленные к элементамdisablePictureInPicture

Это свойство можно отключитьvideoФункция «картинка в картинке» элемента, опция «картинка в картинке» в контекстном меню отключена.

Через атрибуты HTML:

<video src="..." disablePictureInPicture>

Через свойства DOM:

video.disablePictureInPicture = true

3. videoсобытие добавления элементаenterpictureinpictureа такжеleavepictureinpicture 

video.addEventListener('enterpictureinpicture', function(pipWindow) {
  // 进入了画中画模式，可以拿到 pipWindow 对象
})

video.addEventListener('leavepictureinpicture', function() {
  // 退出了画中画模式
})

4. documentметод добавлен вышеexitPictureInPicture()

Поскольку страница может открывать только одно окно PiP, пустьvideoСпособ выхода элемента из режима «картинка в картинке» находится не в самом элементе видео, а вdocumentначальство.

undefined.

5. documentсвойства добавлены наpictureInPictureElementа такжеpictureInPictureEnabled

похожий наdocument.pointerLockElementа такжеdocument.fullscreenElement,document.pictureInPictureElementвернет текущую страницу в режиме изображенияvideoэлемент, если нет, вернутьnull

document.pictureInPictureEnabledКак упоминалось выше, он вернется, если текущая страница не поддерживает или отключен режим «картинка в картинке».false, иначе возвратtrue.

Оба свойства доступны только для чтения.

6. PictureInPictureWindowAPI объекта

отrequestPictureInPicture()возвращаемое значение метода иenterpictureinpictureВы можете получить его в параметре обратного вызова событияpipWindowобъект, который имеет два свойстваwidthа такжеheightТакже поддержите одинresize

async function openPiP(video) {
  const pipWindow = await video.requestPictureInPicture()
  console.log(pipWindow.width, pipWindow.height) // 打印了默认的窗口大小

  pipWindow.addEventListener('resize', function() {
    console.log(pipWindow.width, pipWindow.height) // 用户改变 PiP 窗口大小时触发
  })
}

Обратите внимание здесьwidthа такжеheightТолько для чтения, вы не можете дать им назначение для изменения размера окна.

Разнообразный

Safari поддержал его два года назадРежим «картинка в картинке», а также набор сопутствующих API с префиксом, который называетсяPresentation Mode. Хорошей новостью является то, что эта новая спецификация также имеет В формулировке участвовали сотрудники Safari, фактически пока только Edge не выразил поддержку четырем основным производителям браузеров.

2. Происхождение названия картинка в картинке

"Рисование в живописи" Это функция в телеке десятилетней давности.Я тоже думал об этом названии,когда видел эту норму в прошлом году.Сейчас еще и ВОПРОС уточняется.кто-то спрашивает, надеюсь, вы не поняли, что это вложенный<img>.

3. Какая версия Chrome поддерживает

Текущий Chrome Canary (69) не включает эту функцию по умолчанию, вам нужно включить ее вручную.

chrome://flags/#enable-experimental-web-platform-features

chrome://flags/#disable-background-video-track

chrome://flags/#enable-picture-in-picture

Три переключателя, ни одного канарского честного студента ждать два месяца.

4. Можно ли катапультироватьсяvideoэлементы, кроме

Спецустановщики говорят, что будущее возможно

Категории