O futuro do picture-in-picture

François Beaufort

Antes da API Document Picture-in-Picture, só era possível colocar um elemento HTML <video> em uma janela picture-in-picture. Essa nova API possibilita a abertura de uma janela sempre ativada 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> atual. Por exemplo, é possível fornecer controles e entradas personalizados (por exemplo, legendas, playlists, barra de progressão de tempo, marcar como "Gostei" e "Não gostei" em vídeos) para melhorar a experiência do usuário com o player de vídeo no modo picture-in-picture.

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

O snippet de código a seguir mostra como ativar 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 de qualquer elemento, não apenas <vídeo> para mais informações.

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

Imagem principal de Jakob Owens.