Pubblicata: 5 febbraio 2025
A partire da Chrome 120, le app web per videoconferenze possono aprire automaticamente una finestra Picture in picture quando l'utente sposta lo stato attivo dalla scheda corrente. Questa funzionalità è utile per i presentatori che vogliono vedere e interagire con i partecipanti in tempo reale durante la presentazione di un documento o l'utilizzo di altre schede o finestre. Per maggiori dettagli, vedi Modalità Picture in picture automatica per le app web di videoconferenza.
A partire da Chrome 134, le app web che riproducono audio o video possono attivare automaticamente la modalità Picture in picture. Ciò significa che i player di musica e video sul web ora possono passare senza problemi a una finestra del mini player quando l'utente cambia scheda, eliminando la necessità di attivazione manuale.
Per supportare questi casi d'uso di riproduzione di contenuti multimediali, a partire da Chrome 134 le app web desktop possono attivare automaticamente la modalità Picture in picture, con alcune limitazioni per garantire un'esperienza utente positiva. Un'app web è idonea per il Picture in picture automatico per la riproduzione di contenuti multimediali solo se soddisfa tutte le seguenti condizioni:
L'URL del frame principale è sicuro in base al servizio Navigazione sicura.
I contenuti multimediali si trovano nel frame superiore.
I contenuti multimediali sono stati udibili negli ultimi due secondi.
I contenuti multimediali hanno l'audio in primo piano.
I contenuti multimediali sono in riproduzione.
È stato registrato un gestore dell'azione di sessione multimediale per l'azione
"enterpictureinpicture"
.È stata superata la soglia dell'indice di coinvolgimento con i contenuti multimediali dell'utente, il che indica che l'utente consuma spesso contenuti multimediali in questa app web. Questo vale se l'impostazione del browser dell'utente è "Può chiedere di attivare la modalità Picture in picture". Se l'utente consente esplicitamente all'app web di attivare la modalità Picture in picture, questa condizione non si applica.
![L'impostazione della modalità Picture in picture automatica nel riquadro delle informazioni sul sito del browser Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?authuser=8&hl=it)
Il bug 386193409 monitora l'implementazione delle condizioni di visualizzazione per semplificare il debug e l'implementazione.
Tieni presente che se è già aperta un'altra finestra Picture in picture, Chrome non attiva la modalità Picture in picture automatica. Questa regola non si applica se la finestra Picture in picture esistente è stata aperta automaticamente e sta per chiudersi.
Quando un'app web soddisfa i requisiti, il passaggio dell'attenzione a un'altra scheda attiva la funzione di callback del gestore dell'azione della sessione multimediale per l'azione "enterpictureinpicture"
. In questo modo l'app web può aprire una finestra Picture in picture senza un gesto dell'utente. All'utente potrebbe essere mostrata una finestra di dialogo di autorizzazione che chiede se vuole consentire al sito di attivare automaticamente la modalità Picture in picture ogni volta, solo questa volta o mai.
![Un overlay di autorizzazione nella finestra Picture in picture che chiede all'utente se vuole consentire al sito di attivare automaticamente la modalità Picture in picture.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?authuser=8&hl=it)
Puoi utilizzare l'API Picture in picture per <video> per aprire una finestra Picture in picture da un elemento HTML <video>
oppure l'API Document Picture in picture per aprire una finestra sempre in primo piano da compilare con contenuti HTML arbitrari. La finestra Picture in picture non è attivata quando viene aperta e si chiude automaticamente quando la pagina diventa di nuovo visibile.
Il seguente esempio mostra come riprodurre un elemento HTML <video>
quando un utente fa clic su un pulsante. Poi, registra in sicurezza un gestore dell'azione di sessione multimediale per l'azione "enterpictureinpicture"
con una funzione di callback che apre una finestra Picture in picture. Questa finestra contiene il video con l'API Picture in picture per <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.");
}
Prova la demo del player VideoJS che mostra l'API Document Picture-in-Picture o riproduci gli esempi di Media Session video e Media Session audio.
Coinvolgere e condividere feedback
Se hai feedback o riscontri problemi, puoi condividerli all'indirizzo crbug.com.
Risorse
Riconoscimenti
Grazie a Benjamin Keen e Frank Liberato per le loro recensioni.