Antes de la API de pantalla en pantalla de documentos, solo era posible colocar un elemento <video> HTML en una ventana pantalla en pantalla. Esta API nueva permite abrir una ventana siempre activa que se puede propagar con contenido HTML arbitrario. Está disponible como una prueba de origen a partir de Chrome 111 para computadoras de escritorio.
La nueva API proporciona mucho más de lo que está disponible en la API de pantalla en pantalla para <video> existente. Por ejemplo, puedes proporcionar entradas y controles personalizados (por ejemplo, subtítulos, playlists, un punto de arrastre de tiempo, marcar “me gusta” y “no me gusta” en los videos) para mejorar la experiencia del usuario del reproductor de video en pantalla en pantalla.
Con un documento en pantalla completo, las aplicaciones web de videoconferencia pueden combinar varias transmisiones de video por Internet en una sola ventana de pantalla en pantalla sin tener que depender de los hackeos de lienzo. También pueden ofrecer controles personalizados, como enviar un mensaje, silenciar a otro usuario o levantar la mano.
En el siguiente fragmento de código, se muestra cómo activar o desactivar la función pantalla en pantalla para un reproductor de video personalizado.
async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {
documentPictureInPicture.window.close();
return;
}
// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,
});
// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");
pipWindow.document.body.append(video);
// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo = event.target.querySelector("#video");
videoContainer.append(pipVideo);
});
}
Consulta Pantalla en pantalla para cualquier elemento, no solo <video> para obtener más información.
Los comentarios de los desarrolladores son muy importantes en esta etapa. Por lo tanto, informa los problemas en GitHub con sugerencias y preguntas.
Hero image de Jakob Owens.