O que é Picture-in-Picture (PiP)?

Picture-in-Picture é um recurso do navegador que permite destacar um vídeo da aba atual em uma pequena janela flutuante que fica acima de tudo mais na sua tela. Você pode movê-la para qualquer lugar, redimensioná-la e continuar assistindo enquanto navega em outras abas, escreve documentos ou faz qualquer outra coisa no seu computador — o vídeo permanece visível o tempo todo.

PiP está integrado em todos os navegadores desktop modernos (Chrome, Edge, Firefox, Safari) através de uma API web padronizada. Não requer plugins ou extensões, e a janela flutuante é gerenciada inteiramente pelo sistema operacional, portanto persiste mesmo quando você muda de aplicativo.

Descrição da ferramenta

Esta ferramenta carrega qualquer URL de vídeo direto em um player HTML5 e permite que você o inicie no modo Picture-in-Picture com um clique. Cole um link para um arquivo de vídeo acessível publicamente, carregue-o e pressione "Iniciar Picture-in-Picture" para destacar o vídeo em uma janela de sobreposição flutuante.

Formatos suportados

Qualquer formato de vídeo que o player HTML5 nativo do seu navegador suporte:

  • MP4 (H.264 / H.265) — suportado universalmente
  • WebM (VP8 / VP9 / AV1) — suportado em Chrome, Firefox, Edge
  • OGG / OGV (Theora) — suportado em Firefox e Chrome
  • MOV — suportado em Safari; suporte limitado em outros navegadores
  • M4V — suportado na maioria dos navegadores baseados em Chromium e Safari

O arquivo de vídeo deve ser servido via HTTP/HTTPS e o servidor deve permitir requisições cross-origin (CORS) para que o navegador o carregue.

Como funciona

  1. A URL que você insere é carregada como o src de um elemento HTML5 <video> padrão.
  2. Quando você clica em "Iniciar Picture-in-Picture", o navegador chama a API nativa requestPictureInPicture() nesse elemento.
  3. O navegador destaca o vídeo em uma janela flutuante gerenciada pelo gerenciador de janelas do SO.
  4. Clicar em "Sair do Picture-in-Picture" (ou no botão fechar da janela flutuante) chama exitPictureInPicture() e retorna o vídeo ao player.

Recursos

  • Inicialização e saída do PiP com um clique diretamente do navegador — nenhuma extensão necessária
  • Funciona com qualquer URL de vídeo direto acessível publicamente
  • Player com proporção 16:9 com controles nativos completos (reproduzir, pausar, buscar, volume, tela cheia)
  • Inicia automaticamente a reprodução antes de entrar no PiP para que o vídeo não fique congelado
  • Detecta se PiP não é suportado no navegador atual e exibe uma mensagem clara

Casos de uso

  • Assista a um vídeo de tutorial em uma janela flutuante enquanto segue em um editor de código ou outra aba do navegador
  • Monitore uma transmissão ao vivo ou feed de vídeo gravado enquanto trabalha em outros aplicativos
  • Mantenha uma referência de vídeo visível enquanto edita documentos, planilhas ou arquivos de design

Limitações

  • O servidor de vídeo deve permitir que o arquivo seja buscado de uma origem diferente (headers CORS necessários). Muitas CDNs e hosts de arquivos diretos já fazem isso; alguns não.
  • PiP não está disponível em todos os navegadores — notavelmente alguns navegadores móveis e versões desktop antigas não suportam a API.
  • Formatos de playlist de streaming como HLS (.m3u8) e DASH (.mpd) não são suportados diretamente; apenas URLs de download progressivo funcionam.

Perguntas frequentes

Por que o vídeo falha ao carregar? O servidor que hospeda o vídeo pode não incluir o header Access-Control-Allow-Origin que permite carregamento cross-origin, ou a URL pode exigir autenticação. Tente um link direto público para um arquivo de vídeo.

Por que o botão PiP está desativado? Você precisa carregar um vídeo primeiro inserindo uma URL e clicando em "Carregar Vídeo". O botão fica ativo assim que uma fonte é definida.

Isso funciona em dispositivos móveis? A API Picture-in-Picture tem suporte limitado em navegadores móveis. No iOS, o Safari suporta PiP para vídeos, mas o comportamento pode variar. No Android, o Chrome pode suportá-lo dependendo da versão e das configurações do SO.