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.
![Janela picture-in-picture mostrando o vídeo do trailer da Sintel.](https://developer.chrome.com/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png?authuser=6&hl=pt)
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.