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 abrir uma janela sempre ativa que pode ser preenchida com conteúdo HTML arbitrário. Ele está disponível como um teste de origem do Chrome 111 para computadores a partir do Chrome 111.

A nova API oferece muito mais do que o disponível na API Picture-in-Picture para <video>. Por exemplo, é possível oferecer controles e entradas personalizados (por exemplo, legendas, playlists, controle de tempo, marcar vídeos com "Gostei" ou "Não gostei") para melhorar a experiência do usuário com o player de vídeo picture-in-picture.

Com um documento no modo picture-in-picture completo, os apps da Web de videoconferência podem combinar vários streams de vídeo em uma única janela picture-in-picture sem precisar 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 a seguir mostra como ativar ou desativar o picture-in-picture em 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);
  });
}

Acesse Picture-in-picture para qualquer elemento, não apenas <vídeo> para mais informações.

O feedback do desenvolvedor é muito importante nesta etapa. Registre problemas no GitHub com sugestões e perguntas.

Imagem principal de Jakob Owens.