Сыграй со мной в "картинку в картинке"

браузер

Автор: Джереми
Время чтения: 5~10мин

Когда я раньше смотрела сериалы на Tencent Video, случайно увидела очень полезную функцию картинка в картинке, не поняла и спросила: Что такое "картинка в картинке"? Говоря о картинке в картинке, мы должны упомянуть одну вещь, которую мы часто делаем: мы хотим просматривать Taobao, проводить Weibo, играть в Zhihu во время просмотра телевизора в браузере ПК... Только вы не можете думать об этом, я не не иметь плохого времени! Тем не менее, у нас есть только один экран (ps: беспокоит большой парень с расширенным экраном), в настоящее время нам нужен вспомогательный герой — картинка в картинке, чтобы улучшить использование нашего рабочего стола и эффективность использования времени.

Что такое картинка в картинке

Прежде всего позвольте представить «картинка в картинке»: Картинка в картинке (англ. Picture-in-picture, сокращенно PiP) относится к отображению одной телепрограммы (или другой картинки) на весь экран, в то время как другой или несколько других экранов отображаются в углах, обычно просто воспроизводится звук главного окна - из вики

Приближение эффекта «картинка в картинке» появилось еще в телевизионном репортаже о Олимпийских играх 1976 года в Монреале, в котором использовалось цифровое устройство хранения кадров Quantel для вставки фотографии олимпийского огня крупным планом во время церемонии открытия.

Используйте картинку в картинке в вашем браузере

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

За последние два года производители браузеров стали один за другим поддерживать функцию «картинка в картинке», давайте сначала посмотрим на эффект «картинка в картинке» в браузере:

使用画中画

Поддержка браузера

Ниже описано текущее состояние реализации функции «картинка в картинке» в основных браузерах.

  • Сафари — поддерживается
  • Хром — поддерживается
  • Фаерфокс — бета
  • IE — этап планирования

Для получения подробной информации, пожалуйста, проверьтеImplementation Status

Safari

Еще в сентябре 2016 года Safari добавил поддержку «картинка в картинке» через API WebKit в macOS Sierra. По сравнению с Chrome, Safari добавляет кнопку режима «картинка в картинке» к собственным элементам управления воспроизведением.

Chrome

  • Экспериментальная функция

В апреле 2017 года Chrome выпустил Android O с использованием собственных API-интерфейсов Android для автоматического воспроизведения видео «картинка в картинке» на мобильных устройствах. В октябре 2018 года Chrome добавил функцию «картинка в картинке» в версии 69 клиента для ПК, но в этой версии функция «картинка в картинке» отключена по умолчанию.Если вы хотите включить эту функцию, вам необходимо выполнить следующие действия. операции в браузере:

  1. войтиchrome://flagsи нажмите ввод
  2. Поиск по трем ключевым словам последовательно в поле поискаenable-experimental-web-platform-features(включает разрабатываемые экспериментальные функции веб-платформы),enable-Surfaces-for-videos(включить композитинг VideoLayer на поверхность вместо видео),enable-picture-in-picture(Включите функцию «картинка в картинке» для видео) и установите значение параметра наEnabled.
  3. перезапустить браузер хром
  4. Щелкните правой кнопкой мыши область видео на странице, содержащей видео, и выберите параметр «Картинка в картинке» в строке меню, чтобы просмотреть видео.
  • Официально открытый

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

画中画图标

Потоковое видео с поддержкой webRTC

Функция «картинка в картинке» в Chrome 71 поддерживает воспроизведение видео объектов MediaStream (например, getUserMedia(), getDisplayMedia(), canvas.captureStream()). Это означает, что может отображаться окно «картинка в картинке», содержащее видеопоток пользователя с веб-камеры, т.е. Отображает видеопоток webRTC.

FireFox

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

  1. Открытьabout:configСтраница настроек
  2. поискmedia.videocontrols.picture-in-picture.enabledЩелкните переключатель, чтобы установить его наtrue
  3. перезапустить браузер
  4. Откройте страницу с видео и начните воспроизведение видео.
  5. Щелкните правой кнопкой мыши в области видео, появится меню «картинка в картинке».
  6. Включить картинку в картинке

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

Как разработчики используют картинку в картинке

Для разработчиков самое интересное — позволить пользователям ощутить эффект, создаваемый режимом «картинка в картинке». Спасибо отцу браузера за предоставление соответствующего API для вызова нашими разработчиками. Поскольку сафари было реализовано слишком рано, а Google использовал собственный набор API, этот API еще не стандартизирован (хорошая новость заключается в том, что спецификация веб-API «картинка в картинке» уже находится в разработке).WICGОн находится на стадии черновика, что в целом соответствует спецификации API хрома, подробности можно проштамповать.здесь), и я представлю его веб-API отдельно для поддерживаемых в настоящее время браузеров (chrome и safari):

запустить на хроме

Давайте сначала рассмотрим пример (источник видео в примере взят от Tencent):

画中画-chrome示例

Давайте посмотрим на свойства и методы, используемые в приведенном выше примере:

  • document.pictureInPictureEnabled

Это свойство используется для определения того, поддерживает ли текущий документ функцию, отображаемую в режиме «картинка в картинке». (Нельзя понять, поддерживает ли это браузер, потому что даже если браузер поддерживает, пользователь вернет false, если функция «картинка в картинке» отключена)

  • document.pictureInPictureElement

Это свойство возвращает объект элемента «картинка в картинке», который существует в текущем документе, или null, если он не существует, в противном случае он возвращает элемент видео.

  • video.requestPictureInPicture()

Этот API действительно предназначен для запроса видео на переход в режим «картинка в картинке», а результат вернет обещание и получит объект pipWindow в обратном вызове успеха обещания, который содержит:

{ width, height, resize }

Ширина и высота — это ширина и высота видео, входящего в окно «картинка в картинке» соответственно.Resize может прослушивать обратный вызов события, который запускается при изменении окна «картинка в картинке».

① Почему API монтируется на видео, а не на документ?

Поскольку на странице может быть несколько видео, вам необходимо указать элемент видео, который запускает функцию «картинка в картинке».

② Тогда при каких обстоятельствах вызов API завершится ошибкой?

  1. Система не поддерживает функцию «картинка в картинке».
  2. из-заПолитика ограниченного использования функций, документ не может использовать картинку в картинке.
  3. Метаданные видео не загружены (videoElement.readyState === 0)
  4. Видеофайлы содержат только звук
  5. Элемент видео установленdisablePictureInPictureновая недвижимость
  6. Вызовы запросов «картинка в картинке» не обрабатываются с помощью событий жестов пользователя (например, нажатия кнопок).mouseover,mouseenter,mousemove,mouseleave,scroll,onloadТакие события не считаются событиями жестов пользователя.
  • document.exitPictureInPicture()

Когда мы хотим активно выйти из режима «картинка в картинке», мы можем вызвать этот API, и результат также вернет обещание.

① Почему API подключается к документу, а не к видео?

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

  • onenterpictureinpicture и onleavepictureinpicture

Когда мы хотим отслеживать, действительно ли видео входит/выходит из картинки в картинке, иногда вход/выход из картинки в картинке не запускается вызовом requestPictureInPicture/exitPictureInPicture, Например, пользователь заставляет видео войти в картинку- in-picture через подключаемый модуль Chrome. Прослушайте эти два события, чтобы получить полезную информацию, отчет и другие действия.

бежать на сафари

Поскольку Safari изначально поддерживает функцию «картинка в картинке» еще в 2016 году, API и Chrome совершенно несовместимы. В сафари мы можем понимать "картинка в картинке" как концепцию режима воспроизведения.В сафари всего три режима воспроизведения, а именноinline,picture-in-picture,fullscreen.

Начнем с простого примера:

画中画-safari示例

Как видно из приведенного выше примера, все свойства и методы, связанные с PIP, привязаны к определенным видеоэлементам.

Давайте посмотрим на свойства и методы, используемые в приведенном выше примере:

  • video.webkitSupportsPresentationMode(mode)

Этот метод предназначен для определения "режима представления" (обычно понимаемого как режим воспроизведения), поддерживаемого элементом видео. Здесь режим параметра поддерживает три допустимых значения:picture-in-picture,inline,fullscreen.

Как правило, существует два способа определить, поддерживать ли функцию «картинка в картинке». Первое — это то, что описывает приведенный выше пример, а второе:

let supportsPiP = false;
try {
    supportsPiP = video.webkitSupportsPresentationMode('picture-in-picture');
} catch(e) {
    supportsPiP = false;
}

Если в webkitSupportsPresentationMode передано недопустимое значение, будет выдана следующая ошибка:

输入无效值

  • video.webkitPresentationMode

Значение, возвращаемое этим свойством, на самом деле является одним из трех допустимых значений для указанного выше режима воспроизведения. Это свойство можно использовать, чтобы определить, является ли текущий режим видео «картинка в картинке».

  • video.webkitSetPresentationMode(mode)

Этот метод может установить текущий режим. Когда режим = 'картинка в картинке', он эквивалентен video.requestPictureInPicture() в Chrome. Когда mode='inline', это эквивалентно document.exitPictureInPicture() в chrome. должны знать о том,Вызов этого метода в сафари для входа/выхода из режима «картинка в картинке» не имеет возвращаемого значения., конечно, он не сообщит об ошибке.

  • onwebkitpresentationmodechanged

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

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

совместимый с полифиллом

Основываясь на текущей поддержке «картинка в картинке», вот один из них.Полифил «картинка в картинке»Библиотека совместима с хромом и сафари.

автоматическая картинка в картинке

Возможности автоматического режима «картинка в картинке» упоминаются в проекте WICG «Картинка в картинке»:

«На некоторых страницах есть видеоэлементы, которые хотят автоматически входить и выходить из режима «картинка в картинке», например, видео веб-приложение выиграет от некоторого автоматического поведения «картинка в картинке», когда пользователь переключается между веб-приложением и другим приложением. Но, к сожалению, пользовательские жесты в настоящее время невозможны, поэтому необходим Auto Picture-in-Picture!"

Нам просто нужно добавить новый атрибут к элементу видео.autopictureinpicture:

<video autopictureinpicture></video>

Это означает, что разработчику не нужно вручную вызывать метод для выполнения режима «картинка в картинке». (если разрешен режим «картинка в картинке»), Видеоэлементы в режиме «картинка в картинке» автоматически удаляются, когда страница документа видна.

Справочная документация

Включает общесистемные эффекты «картинка в картинке» для Chrome и Firefox.

Picture-in-Picture

GitHub.com/W ICG/Batch вдруг…

Developers.Google.com/Web/updates…

Подпишитесь на официальный аккаунт [IVWEB Community], чтобы получать свежие статьи каждую неделю, ведущие к вершине жизни!

Категории