Esta página foi traduzida pela API Cloud Translation.

Entrar no modo picture-in-picture automaticamente ao reproduzir mídia

François Beaufort

Publicado em 5 de fevereiro de 2025

No Chrome 120, os apps da Web de videoconferência podem abrir automaticamente uma janela picture-in-picture quando o usuário muda o foco da guia atual. Isso é útil para apresentadores que querem ver e interagir com os participantes em tempo real enquanto apresentam um documento ou usam outras guias ou janelas. Consulte Picture-in-picture automático para apps da Web de videoconferência para mais detalhes.

No Chrome 134 e versões mais recentes, os apps da Web que tocam áudio ou vídeo podem entrar automaticamente no modo picture-in-picture. Isso significa que os players de música e vídeo na Web agora podem alternar para uma janela de miniplayer quando o usuário alternar de guia, eliminando a necessidade de ativação manual.

Uma janela de imagem em imagem é aberta e fechada automaticamente quando o usuário do Spotify muda de guia.

Para oferecer suporte a esses casos de uso de reprodução de mídia, a partir do Chrome 134, os apps da Web para computador podem entrar automaticamente no modo picture-in-picture, com algumas restrições para garantir uma experiência positiva do usuário. Um app da Web só pode usar o picture-in-picture automático para reprodução de mídia se atender a todas as condições a seguir:

O URL do frame principal é seguro de acordo com o serviço Navegação segura.
A mídia fica no frame superior.
A mídia foi ouvida nos últimos dois segundos.
A mídia tem foco de áudio.
A mídia está sendo reproduzida.
Um gerenciador de ação de sessão de mídia para a ação "enterpictureinpicture" foi registrado.
O limite do índice de engajamento com mídia do usuário foi excedido, indicando que o usuário consome mídia com frequência nesse app da Web. Isso se aplica se a configuração do navegador do usuário for "Pode pedir para entrar no modo picture-in-picture". Se o usuário permitir explicitamente que o app da Web entre no modo picture-in-picture, essa condição não será aplicada.

A configuração automática do picture-in-picture no painel de informações do site do navegador Chrome. — Configuração automática de imagem em janela no painel de informações do site do navegador Chrome.

O bug 386193409 rastreia a implementação das condições de exibição para facilitar a depuração e a implementação.

Se outra janela picture-in-picture já estiver aberta, o Chrome não vai acionar o picture-in-picture automático. Essa regra não se aplica se a janela picture-in-picture atual foi aberta automaticamente e está prestes a ser fechada.

Quando um app da Web atende aos requisitos, a mudança de foco para outra guia aciona a função de callback do gerenciador de ações da sessão de mídia para a ação "enterpictureinpicture". Isso permite que o app da Web abra uma janela de imagem em imagem sem um gesto do usuário. O usuário pode receber uma caixa de diálogo de permissão perguntando se ele quer permitir que o site entre no modo picture-in-picture automaticamente sempre, apenas desta vez ou nunca.

É possível usar a API Picture-in-Picture para <video> para abrir uma janela picture-in-picture de um elemento HTML <video> ou a API Document Picture-in-Picture para abrir uma janela sempre visível e preencher com conteúdo HTML arbitrário. A janela picture-in-picture não é focada quando aberta e é fechada automaticamente quando a página fica visível novamente.

O exemplo a seguir mostra como reproduzir um elemento <video> HTML quando um usuário clica em um botão. Em seguida, registre com segurança um gerenciador de ações de sessão de mídia para a ação "enterpictureinpicture" com uma função de callback que abre uma janela picture-in-picture. Esta janela contém o vídeo com a API Picture-in-Picture para <video>.

const video = document.querySelector("video");

async function onPlayButtonClick() {
  // Play video.
  await video.play();
}

try {
  // Request video to automatically enter picture-in-picture when eligible.
  navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
    await video.requestPictureInPicture();
  });
} catch (error) {
  console.log("The enterpictureinpicture action is not yet supported.");
}

Teste a demonstração do player VideoJS, que mostra a API Picture-in-Picture de documentos, ou teste os exemplos de sessão de mídia de vídeo e sessão de mídia de áudio.

Entrar no modo picture-in-picture automaticamente ao reproduzir mídia

Engajamento e compartilhamento de feedback

Recursos

Agradecimentos