O futuro do picture-in-picture

François Beaufort

Antes da API Document Picture-in-Picture, só era possível colocar um elemento <video> HTML em uma janela Picture-in-Picture. Essa nova API permite abrir uma janela sempre visível que pode ser preenchida com conteúdo HTML arbitrário. Ele está disponível como um teste de origem a partir do Chrome 111 para computadores.

Uma janela picture-in-picture criada com a API Document Picture-in-Picture (demonstração).

A nova API oferece muito mais do que a API Picture-in-Picture para <video>. Por exemplo, é possível fornecer controles e entradas personalizados (como legendas, playlists, controle de tempo, curtidas e não curtidas de vídeos) para melhorar a experiência do usuário no player de vídeo picture-in-picture.

Com um documento completo em Picture-in-Picture, os apps da Web de videoconferência podem combinar vários streams de vídeo em uma única janela Picture-in-Picture sem depender de hacks de tela. Eles também podem oferecer controles personalizados, como enviar uma mensagem, silenciar outro usuário ou levantar a mão.

O snippet de código abaixo mostra como alternar o modo Picture-in-Picture para um player de vídeo personalizado.

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);
  });
}

Confira Picture-in-Picture para qualquer elemento, não apenas <video> para mais informações.

O feedback dos desenvolvedores é muito importante nesta fase. Por isso, registre problemas no GitHub com sugestões e perguntas.