Будущее «Картинка в картинке»

François Beaufort

До API «Картинка в картинке» документа можно было поместить только HTML-элемент <video> в окно «Картинка в картинке». Этот новый API позволяет открывать постоянное окно, которое можно заполнить произвольным HTML-содержимым. Он доступен в виде пробной версии , начиная с версии Chrome 111 для настольных компьютеров.

Окно «Картинка в картинке», созданное с помощью API «Картинка в картинке» документа ( демо ).

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

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

В следующем фрагменте кода показано, как переключить режим «картинка в картинке» для пользовательского видеоплеера.

async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    initialAspectRatio: 640 / 360,
    copyStyleSheets: true,
  });

  // Move video to the Picture-in-Picture window.
  const video = document.querySelector("#video");
  pipWindow.document.body.append(video);

  // Listen for the PiP closing event to move the video back.
  pipWindow.addEventListener("unload", (event) => {
    const videoContainer = document.querySelector("#videoContainer");
    const pipVideo = event.target.querySelector("#video");
    videoContainer.append(pipVideo);
  });
}

Для получения дополнительной информации проверьте «Картинка в картинке» для любого элемента, а не только для <video> .

На этом этапе очень важна обратная связь с разработчиками, поэтому сообщайте о проблемах на GitHub с предложениями и вопросами.

Изображение героя Джейкоба Оуэнса .