Ingresar automáticamente al modo de pantalla en pantalla cuando se reproduce contenido multimedia

François Beaufort
François Beaufort

Fecha de publicación: 5 de febrero de 2025

A partir de Chrome 120, las apps web de videoconferencias pueden abrir automáticamente una ventana de pantalla en pantalla cuando el usuario cambia el enfoque de su pestaña actual. Esto es útil para los presentadores que desean ver a los participantes e interactuar con ellos en tiempo real mientras presentan un documento o usan otras pestañas o ventanas. Consulta Pantalla en pantalla automática para apps web de videoconferencias para obtener más información.

A partir de Chrome 134, las apps web que reproducen audio o video pueden ingresar automáticamente al modo de pantalla en pantalla. Esto significa que los reproductores de música y video en la Web ahora pueden cambiar sin problemas a una ventana de reproductor en miniatura cuando el usuario cambia de pestaña, lo que elimina la necesidad de activación manual.

Se abre y cierra automáticamente una ventana de imagen en imagen cuando el usuario de Spotify cambia de pestaña.

Para admitir estos casos de uso de reproducción de contenido multimedia, a partir de Chrome 134, las apps web para computadoras de escritorio pueden ingresar automáticamente al modo de pantalla en pantalla, con algunas restricciones para garantizar una experiencia del usuario positiva. Una app web solo es apta para la función de pantalla en pantalla automática para la reproducción de contenido multimedia si cumple con todas las siguientes condiciones:

  • La URL del marco superior es segura según el servicio de Navegación segura.

  • El contenido multimedia se encuentra en el marco superior.

  • El contenido multimedia se escuchó en los últimos dos segundos.

  • El contenido multimedia tiene el foco de audio.

  • Se está reproduciendo el contenido multimedia.

  • Se registró un controlador de acción de sesión multimedia para la acción "enterpictureinpicture".

  • Se superó el umbral del Índice de participación en contenido multimedia del usuario, lo que indica que el usuario consume contenido multimedia con frecuencia en esta app web. Esto se aplica si la configuración del navegador del usuario es "Puede solicitar ingresar al modo pantalla en pantalla". Si el usuario permite explícitamente que la app web entre en modo de imagen en imagen, no se aplica esta condición.

Configuración del modo de pantalla en pantalla automático en el panel de información del sitio del navegador Chrome.
Configuración automática de pantalla en pantalla en el panel de información del sitio del navegador Chrome.

El error 386193409 realiza un seguimiento de la implementación de las condiciones de aparición para facilitar la depuración y la implementación.

Ten en cuenta que, si ya está abierta otra ventana de pantalla en pantalla, Chrome no activa la función automáticamente. Esta regla no se aplica si la ventana de pantalla en pantalla existente se abrió automáticamente y está a punto de cerrarse.

Cuando una app web cumple con los requisitos, cambiar el enfoque a otra pestaña activa la función de devolución de llamada del controlador de acciones de sesión multimedia para la acción "enterpictureinpicture". Esto permite que la app web abra una ventana de imagen en imagen sin un gesto del usuario. Luego, es posible que se le muestre al usuario un diálogo de permisos en el que se le pregunte si desea permitir que el sitio entre en modo Picture-in-Picture automáticamente cada vez, solo esta vez o nunca.

Una superposición de permisos en la ventana de pantalla en pantalla que le pregunta al usuario si desea permitir que el sitio ingrese automáticamente al modo de pantalla en pantalla
Se le pregunta al usuario si se permite ingresar automáticamente al modo de pantalla en pantalla.

Puedes usar la API de Picture-in-Picture para <video> para abrir una ventana de pantalla en pantalla desde un elemento <video> HTML o la API de Document Picture-in-Picture para abrir una ventana siempre en la parte superior que se propague con contenido HTML arbitrario. La ventana de pantalla en pantalla no se enfoca cuando se abre y se cierra automáticamente cuando la página vuelve a ser visible.

En el siguiente ejemplo, se muestra cómo reproducir un elemento <video> HTML cuando un usuario hace clic en un botón. Luego, registra de forma segura un controlador de acciones de sesión multimedia para la acción "enterpictureinpicture" con una función de devolución de llamada que abra una ventana de pantalla en pantalla. Esta ventana contiene el video con la API de 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.");
}

Prueba la demostración del reproductor VideoJS, que muestra la API de Document Picture-in-Picture, o juega con los ejemplos de Video Media Session y Audio Media Session.

Interactúa y comparte comentarios

Si tienes comentarios o problemas, puedes compartirlos en crbug.com.

Recursos

Agradecimientos

Gracias a Benjamin Keen y Frank Liberato por sus comentarios.