Antes de la API de pantalla en pantalla del documento, solo era posible colocar un elemento <video> de HTML en una ventana de pantalla en pantalla. Esta nueva API permite abrir una ventana siempre activa que se puede completar con contenido HTML arbitrario. Está disponible como una prueba de origen a partir de Chrome 111 en computadoras.
La nueva API proporciona mucho más de lo que está disponible en la API de pantalla en pantalla existente para <video>. Por ejemplo, puedes proporcionar entradas y controles personalizados (por ejemplo, subtítulos, playlists, punto de arrastre de tiempo, indicar que te gusta o que no te gusta videos) para mejorar la experiencia del usuario del reproductor de video pantalla en pantalla.
Con un Documento en pantalla en pantalla completo, las apps web de videoconferencia pueden combinar varias transmisiones de video en una sola ventana de pantalla en pantalla sin tener que depender de trucos 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);
});
}
Para obtener más información, consulta Pantalla en pantalla para cualquier elemento, no solo <video>.
Los comentarios de los desarrolladores son muy importantes en esta etapa, por lo que te pedimos que informas los problemas en GitHub con sugerencias y preguntas.
Hero image de Jakob Owens.