API «Картинка в картинке» | Кодементор

Picture-in-Picture API (PiP) — это новый экспериментальный API веб-платформы, который позволяет веб-страницам воспроизводить видео в маленьком окне, которое остается поверх других окон. Эта функция полезна для видео-сайтов, которые хотят, чтобы их пользователи продолжали смотреть их видео, занимаясь чем-то другим, например, просматривая обучающее видео по кодированию, одновременно кодируя в своих текстовых редакторах и т. д.

Картинка в картинке в настоящее время находится за флагами браузера (например, 3 из них) в Chrome 69, но мы должны иметь возможность поиграть с ними сейчас, установив последнюю версию Chrome и включив эти флаги.

В этой статье вы узнаете, как начать работу с функцией «Картинка в картинке», чтобы ваши видео оставались поверх других окон. Вы также можете ознакомиться с Репозиторий GitHub а также живая демонстрация сразу, если хочешь.

Прежде чем мы перейдем к коду, давайте сначала убедимся, что мы можем правильно просматривать наши результаты в браузере, включив необходимые флаги браузера Chrome. Перейти к chrome://flags в браузере Chrome и включите следующее:

• Возможности экспериментальной веб-платформы
• Включить картинку в картинке
• Включить использование объектов SurfaceLayer для видео

В этой статье мы будем использовать следующую разметку HTML в качестве отправной точки:

<video
  src="
  controls
></video>

<button>Enter Picture-in-Picture</button>

На странице будет отображаться элемент видео, воспроизводящий трейлер Big Buck Bunny, и кнопка для переключения режима «Картинка в картинке»; и с некоторыми стилями будет выглядеть так:

В нашем коде JavaScript мы также собираемся определить переменные для ссылки на элементы видео и кнопки.

const video = document.querySelector('video');
const button = document.querySelector('button');

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

Проверить наличие поддержки «картинка в картинке» можно, проверив pictureInPictureEnabled собственность на document объект:

if (!document.pictureInPictureEnabled) {
  

  button.textContent = 'PiP is not supported in your browser.';
  button.disabled = true;
}

В спецификации сказано, что document.pictureInPictureEnabled «является true если нет ранее установленных пользовательских предпочтений, ограничений или ограничений платформы, и false в противном случае.» Я не знаю, каковы все эти предпочтения, ограничения и ограничения, но это false когда какой-либо из необходимых флагов браузера не включен. Для старых браузеров это будет просто undefined что является значением false-y.

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

Мы можем перевести видео в режим «картинка в картинке», вызвав метод requestPictureInPicture() метод на нем, который возвращает Обещать объект, который можно использовать, чтобы определить, был ли запрос успешным или нет.

button.addEventListener('click', () => {
  video.requestPictureInPicture()
    .then(() => { 

Когда обещание будет выполнено, видео перейдет в режим «картинка в картинке». document.pictureInPictureElement свойство будет установлено на элемент, который в данный момент находится в режиме «Картинка в картинке», т.е. наш video элемент.

Пользователи могут выйти из режима «Картинка в картинке», щелкнув значок «x» в окне «Картинка в картинке».

Однако мы также можем добавить на нашу страницу способ выхода пользователя из режима «Картинка в картинке». В нашем примере нажатие на кнопку «Войти в режим «Картинка в картинке» при наличии окна «Картинка в картинке» должно закрыть его.

Мы модифицируем обработчик события нажатия нашей кнопки, чтобы проверить, не отображается ли уже элемент видео в режиме «Картинка в картинке». Если есть, мы закрываем его, вызывая document.exitPictureInPicture() метод.

button.addEventListener('click', () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture()
      .then(() => {  });
  } else {
    
  }
});

Когда элементы входят в режим «Картинка в картинке» и выходят из нее, они запускают события, чтобы сообщить об этих изменениях. Функция «Картинка в картинке» определяет два новых события для видеоэлементов: enterpictureinpicture а также leavepictureinpictureкоторые запускаются, когда элемент входит и выходит из режима «Картинка в картинке» соответственно.

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

video.addEventListener('enterpictureinpicture', () => {
  button.textContent = 'Exit Picture-in-Picture';
});

video.addEventListener('leavepictureinpicture', () => {
  button.textContent = 'Enter Picture-in-Picture';
});

И это все, что касается API «Картинка в картинке»! Вот несколько заключительных замечаний и мыслей по этому поводу:

1. В настоящее время он работает только с видеоэлементами, но должен быть расширяемым. Это означает, что в будущем у нас потенциально может быть возможность размещать любые другие элементы в окне «Картинка в картинке».
2. Количество разрешенных окон «картинка в картинке» определяется реализацией браузера и платформой.
3. Окно «Картинка в картинке» остается в правом нижнем углу экрана. Было бы неплохо иметь возможность перетаскивать его и изменять его размер.

1. Черновик редактора «Картинка в картинке»
2. Пост «Картинка в картинке» (PiP) по Франсуа Бофор

Спасибо за чтение этой статьи! Я веб-разработчик из Себу, Филиппины. Я также пишу статьи и делаю демонстрации о крутых веб-приложениях. Вы можете ознакомиться с ними на мой блог и дальше мой профиль на гитхабе. Хорошего дня! 🦔