Entrar no modo picture-in-picture de vídeo automaticamente em mais sites

Benjamin Keen
Benjamin Keen
François Beaufort
François Beaufort

Publicado em: 18 de março de 2026

A partir do Chrome 142, os apps da Web que reproduzem áudio ou vídeo podem entrar automaticamente no modo picture-in-picture se registrarem um gerenciador de ações da sessão de mídia. Isso foi uma ótima adição para players de música e vídeo, mas exige que os desenvolvedores implementem o suporte explicitamente.

Para oferecer uma experiência de multitarefa de mídia integrada e melhorar a capacidade de descoberta do modo picture-in-picture (PiP), o Chrome apresenta o PiP automático iniciado pelo navegador. Com esse recurso, o Chrome abre automaticamente uma janela picture-in-picture de vídeo para sites que não registraram um gerenciador de ações de sessão de mídia. Isso garante que seu conteúdo de mídia permaneça visível quando você mudar de guia.

Instruções

  • Use o Chrome 142 ou uma versão mais recente no computador.
  • Ative a opção "Picture-in-picture automático iniciado pelo navegador" em chrome://flags/#browser-initiated-automatic-picture-in-picture e reinicie o Chrome.
  • Acesse um site de vídeos e reproduza um vídeo (exemplo).
  • Mude para outra guia do Chrome para abrir uma janela picture-in-picture de vídeo.

Como funciona

Quando você reproduz mídia e muda para outra guia, o Chrome pode mover automaticamente a mídia para uma janela picture-in-picture de vídeo sempre ativa. Ao contrário do recurso "PIP automático para reprodução de mídia", que é compatível com vídeo ou conteúdo HTML arbitrário (usando a API Picture-in-Picture de documentos), as solicitações iniciadas pelo navegador sempre abrem uma janela PIP de vídeo padrão.

Para garantir uma experiência do usuário de alta qualidade e não intrusiva, o Chrome só aciona esse comportamento quando um conjunto estrito de condições é atendido:

  • O URL do frame principal é seguro de acordo com o serviço Navegação segura.
  • A mídia está no frame de cima.
  • A mídia foi audível nos últimos dois segundos.
  • A mídia tem seleção de áudio e está sendo reproduzida.
  • Existe um único player "normal", ou seja, um elemento de mídia sem som que foi reproduzido e não está usando MediaStream.
  • O elemento de mídia precisa ter uma faixa de vídeo.
  • O site não está usando ativamente a câmera ou o microfone.
  • O usuário excedeu o limite do Índice de engajamento de mídia, o que indica uso frequente do site. Essa condição se aplica se o usuário não tiver permitido ou negado explicitamente o recurso.
  • Nenhuma janela picture-in-picture está aberta no momento. Se outra janela picture-in-picture já estiver aberta, o Chrome não vai acionar uma transição automática.
Comparação entre o Picture-in-Picture automático iniciado pelo navegador (site sem um gerenciador de ações enterpictureinpicture) e o Picture-in-Picture automático para reprodução de mídia (em que o site registrou o gerenciador).

Controle e privacidade do usuário

O Auto PiP iniciado pelo navegador respeita as mesmas permissões e configurações do usuário que as solicitações iniciadas pelo site. Na primeira vez que um site entra no PiP automaticamente, o Chrome mostra aos usuários uma caixa de diálogo de permissão perguntando se eles querem permitir esse comportamento para o site no futuro.

Os usuários também podem gerenciar essas permissões a qualquer momento em Configurações do site.

Controle e desativação para desenvolvedores

Embora esse recurso tenha sido projetado para funcionar automaticamente na maioria dos sites de vídeo, é possível desativar esse comportamento.

Implementar seu próprio gerenciador

Se o web app já registrar um manipulador de ações da sessão de mídia para a ação enterpictureinpicture, sua implementação terá precedência, e o Chrome não vai iniciar a própria transição automática.

Se você quiser personalizar o comportamento quando o Chrome achar que uma transição é adequada, o gerenciador de ações enterpictureinpicture vai incluir um reason no MediaSessionActionDetails. Você pode verificar se o reason é contentoccluded (o que significa que o navegador iniciou a solicitação porque a guia estava oculta) e decidir como proceder.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

Práticas recomendadas para sessões de mídia

Com o Picture-in-Picture automático iniciado pelo navegador, a configuração da sessão de mídia ajuda o Chrome a entender e interagir com seu conteúdo. Um MediaSession bem configurado garante que a janela picture-in-picture ofereça uma experiência de alta qualidade com controles e informações precisas para os usuários.

Manter a barra de progresso sincronizada

Se a API setPositionState for usada e a posição da sessão de mídia não for atualizada corretamente, as janelas PiP vão mostrar uma barra de progresso imprecisa durante a reprodução de mídia. Para evitar isso, sempre atualize ou desfaça a configuração de position state usando navigator.mediaSession.setPositionState() conforme necessário (por exemplo, quando a origem de mídia muda ou é redefinida). Assim, a janela PiP reflete a posição correta da mídia em reprodução.

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

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

Lide com as transições sem estresse

Se o site reproduzir automaticamente um "Próximo episódio", verifique se os manipuladores de ações MediaSession e os metadados permanecem ativos e precisos durante toda a transição. Se os manipuladores de ações forem removidos ou desativados durante a transição para um elemento "Próximo", a janela picture-in-picture poderá perder os recursos fornecidos pelo gerenciador.

Ativar controle total

Além de tocar e pausar, considere implementar gerenciadores para seekto, previoustrack e nexttrack. Isso permite que os usuários naveguem pelo conteúdo diretamente da janela picture-in-picture sem voltar à guia original.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

Engajamento e como compartilhar feedback

Se você tiver feedback ou encontrar algum problema com esse comportamento, compartilhe em crbug.com.

Recursos