¿Qué es Picture-in-Picture (PiP)?

Picture-in-Picture es una función del navegador que te permite extraer un vídeo de la pestaña actual en una pequeña ventana flotante que se mantiene encima de todo lo demás en tu pantalla. Puedes moverla a cualquier lugar, redimensionarla y seguir viendo mientras navegas por otras pestañas, escribes documentos o haces cualquier otra cosa en tu ordenador — el vídeo permanece visible todo el tiempo.

PiP está integrado en todos los navegadores de escritorio modernos (Chrome, Edge, Firefox, Safari) a través de una API web estandarizada. No requiere plugins ni extensiones, y la ventana flotante es gestionada completamente por el sistema operativo, por lo que persiste incluso cuando cambias de aplicación.

Descripción de la herramienta

Esta herramienta carga cualquier URL de vídeo directo en un reproductor HTML5 y te permite iniciarlo en modo Picture-in-Picture con un solo clic. Pega un enlace a un archivo de vídeo accesible públicamente, cárgalo y presiona "Iniciar Picture-in-Picture" para desprender el vídeo en una ventana de superposición flotante.

Formatos compatibles

Cualquier formato de vídeo que admita el reproductor HTML5 nativo de tu navegador:

  • MP4 (H.264 / H.265) — compatible universalmente
  • WebM (VP8 / VP9 / AV1) — compatible en Chrome, Firefox, Edge
  • OGG / OGV (Theora) — compatible en Firefox y Chrome
  • MOV — compatible en Safari; compatibilidad limitada en otros navegadores
  • M4V — compatible en la mayoría de navegadores basados en Chromium y Safari

El archivo de vídeo debe servirse sobre HTTP/HTTPS y el servidor debe permitir solicitudes entre orígenes (CORS) para que el navegador pueda cargarlo.

Cómo funciona

  1. La URL que ingresas se carga como el src de un elemento HTML5 <video> estándar.
  2. Cuando haces clic en "Iniciar Picture-in-Picture", el navegador llama a la API nativa requestPictureInPicture() en ese elemento.
  3. El navegador desprende el vídeo en una ventana flotante gestionada por el gestor de ventanas del SO.
  4. Hacer clic en "Salir de Picture-in-Picture" (o el botón de cerrar en la ventana flotante) llama a exitPictureInPicture() y devuelve el vídeo al reproductor.

Características

  • Inicio y salida de PiP con un solo clic directamente desde el navegador — no se necesitan extensiones
  • Funciona con cualquier URL de vídeo directo accesible públicamente
  • Reproductor con relación de aspecto 16:9 con controles nativos completos (reproducir, pausar, buscar, volumen, pantalla completa)
  • Inicia automáticamente la reproducción antes de entrar en PiP para que el vídeo no se congele
  • Detecta si PiP no es compatible en el navegador actual y muestra un mensaje claro

Casos de uso

  • Ver un vídeo tutorial en una ventana flotante mientras sigues las instrucciones en un editor de código u otra pestaña del navegador
  • Monitorear una transmisión en directo o una fuente de vídeo grabada mientras trabajas en otras aplicaciones
  • Mantener una referencia de vídeo visible mientras editas documentos, hojas de cálculo o archivos de diseño

Limitaciones

  • El servidor de vídeo debe permitir que el archivo se obtenga desde un origen diferente (se requieren encabezados CORS). Muchas CDN y hosts de archivos directos ya lo hacen; algunos no.
  • PiP no está disponible en todos los navegadores — notablemente algunos navegadores móviles y versiones de escritorio antiguas no admiten la API.
  • Los formatos de lista de reproducción de transmisión como HLS (.m3u8) y DASH (.mpd) no son compatibles directamente; solo funcionan las URL de descarga progresivo.

Preguntas frecuentes

¿Por qué falla la carga del vídeo? El servidor que aloja el vídeo puede no incluir el encabezado Access-Control-Allow-Origin que permite la carga entre orígenes, o la URL puede requerir autenticación. Intenta con un enlace público directo a un archivo de vídeo.

¿Por qué está deshabilitado el botón de PiP? Necesitas cargar un vídeo primero ingresando una URL y haciendo clic en "Cargar vídeo". El botón se activa una vez que se establece una fuente.

¿Funciona en dispositivos móviles? La API de Picture-in-Picture tiene compatibilidad limitada en navegadores móviles. En iOS, Safari admite PiP para vídeos pero el comportamiento puede variar. En Android, Chrome puede admitirlo dependiendo de la versión y la configuración del SO.