Prima dell'API Document Picture-in-Picture, era possibile solo inserire un elemento <video> HTML in una finestra Picture in picture. Questa nuova API consente di aprire una finestra sempre attiva che può essere completata con contenuti HTML arbitrari. È disponibile come prova dell'origine a partire da Chrome 111 su computer.
La nuova API offre molto più di quanto offerto dall'API Picture in picture per <video> esistente. Ad esempio, puoi fornire controlli e input personalizzati (ad esempio sottotitoli codificati, playlist, dispositivo di scorrimento temporale, Mi piace e Non mi piace) per migliorare l'esperienza del video player Picture in picture dell'utente.
Con un modello completo di Document in Picture in picture, le app web di videoconferenza possono combinare più stream video in un'unica finestra Picture in picture senza dover ricorrere a compromissioni del canvas. Inoltre, possono offrire controlli personalizzati, come l'invio di un messaggio, la disattivazione dell'audio di un altro utente o la possibilità di alzare 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);
});
}
Dai un'occhiata alla sezione Picture in picture per qualsiasi elemento, non solo su <video> per avere ulteriori informazioni.
Il feedback degli sviluppatori è molto importante in questa fase, quindi segnala i problemi su GitHub con suggerimenti e domande.
Immagine hero di Jakob Owens.