Prima dell'API Document Picture-in-Picture, era possibile solo inserire un elemento HTML <video> in una finestra Picture in picture. Questa nuova API consente di aprire una finestra sempre in primo piano che può essere compilata con contenuti HTML arbitrari. È disponibile come prova dell'origine a partire da Chrome 111 su computer.
La nuova API offre molto di più rispetto all'API Picture in picture per <video> esistente. Ad esempio, puoi fornire input e comandi personalizzati (ad esempio, sottotitoli codificati, playlist, cursore temporale, Mi piace e Non mi piace sui video) per migliorare l'esperienza dell'utente nel video player Picture in picture.
Grazie a un documento completo in Picture in picture, le app web di videoconferenza possono combinare più stream video in un'unica finestra Picture in picture senza dover fare affidamento su trucchi per le tele. Inoltre, possono fornire controlli personalizzati come l'invio di un messaggio, la disattivazione dell'audio di un altro utente o l'alzata di una mano.
Il seguente snippet di codice mostra come attivare/disattivare Picture in picture per un video player personalizzato.
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);
});
}
Per ulteriori informazioni, guarda Picture in picture per qualsiasi elemento, non solo per il <video>.
Il feedback degli sviluppatori è molto importante in questa fase, quindi invia una segnalazione di problemi su GitHub con suggerimenti e domande.
Immagine hero di Jakob Owens.