Che cos'è Picture-in-Picture (PiP)?

Picture-in-Picture è una funzione del browser che ti permette di estrarre un video dalla scheda corrente in una piccola finestra mobile che rimane in primo piano rispetto a tutto il resto dello schermo. Puoi spostarla ovunque, ridimensionarla e continuare a guardare mentre navighi in altre schede, scrivi documenti o fai qualsiasi altra cosa sul tuo computer — il video rimane visibile tutto il tempo.

PiP è integrato in tutti i browser desktop moderni (Chrome, Edge, Firefox, Safari) attraverso un'API web standardizzata. Non richiede plugin o estensioni, e la finestra mobile è gestita interamente dal sistema operativo, quindi persiste anche quando cambi applicazione.

Descrizione dello strumento

Questo strumento carica qualsiasi URL video diretto in un lettore HTML5 e ti permette di avviarlo in modalità Picture-in-Picture con un solo clic. Incolla un collegamento a un file video pubblicamente accessibile, caricalo e premi "Avvia Picture-in-Picture" per staccare il video in una finestra overlay mobile.

Formati supportati

Qualsiasi formato video supportato dal lettore HTML5 nativo del tuo browser:

  • MP4 (H.264 / H.265) — supportato universalmente
  • WebM (VP8 / VP9 / AV1) — supportato in Chrome, Firefox, Edge
  • OGG / OGV (Theora) — supportato in Firefox e Chrome
  • MOV — supportato in Safari; supporto limitato altrove
  • M4V — supportato nella maggior parte dei browser basati su Chromium e Safari

Il file video deve essere servito tramite HTTP/HTTPS e il server deve consentire le richieste cross-origin (CORS) affinché il browser lo carichi.

Come funziona

  1. L'URL che inserisci viene caricato come src di un elemento HTML5 <video> standard.
  2. Quando fai clic su "Avvia Picture-in-Picture", il browser chiama l'API nativa requestPictureInPicture() su quell'elemento.
  3. Il browser stacca il video in una finestra mobile gestita dal gestore finestre del sistema operativo.
  4. Facendo clic su "Esci da Picture-in-Picture" (o sul pulsante di chiusura della finestra mobile) viene chiamato exitPictureInPicture() e il video ritorna al lettore.

Funzionalità

  • Avvio e uscita da PiP con un solo clic direttamente dal browser — nessuna estensione necessaria
  • Funziona con qualsiasi URL video diretto pubblicamente accessibile
  • Lettore con rapporto di aspetto 16:9 con controlli nativi completi (riproduzione, pausa, ricerca, volume, schermo intero)
  • Avvia automaticamente la riproduzione prima di entrare in PiP in modo che il video non sia congelato
  • Rileva se PiP non è supportato nel browser corrente e mostra un messaggio chiaro

Casi d'uso

  • Guarda un video tutorial in una finestra mobile mentre segui le istruzioni in un editor di codice o in un'altra scheda del browser
  • Monitora uno streaming live o un feed video registrato mentre lavori in altre applicazioni
  • Mantieni un video di riferimento visibile mentre modifichi documenti, fogli di calcolo o file di design

Limitazioni

  • Il server video deve consentire il recupero del file da un'origine diversa (intestazioni CORS richieste). Molti CDN e host di file diretti lo fanno già; alcuni no.
  • PiP non è disponibile in tutti i browser — in particolare alcuni browser mobile e versioni desktop più vecchie non supportano l'API.
  • I formati di playlist di streaming come HLS (.m3u8) e DASH (.mpd) non sono supportati direttamente; funzionano solo gli URL di download progressivo.

Domande frequenti

Perché il video non riesce a caricarsi? Il server che ospita il video potrebbe non includere l'intestazione Access-Control-Allow-Origin che consente il caricamento cross-origin, oppure l'URL potrebbe richiedere l'autenticazione. Prova un collegamento pubblico diretto a un file video.

Perché il pulsante PiP è disabilitato? Devi prima caricare un video inserendo un URL e facendo clic su "Carica video". Il pulsante diventa attivo una volta impostata un'origine.

Funziona su dispositivi mobile? L'API Picture-in-Picture ha un supporto limitato nei browser mobile. Su iOS, Safari supporta PiP per i video ma il comportamento potrebbe essere diverso. Su Android, Chrome potrebbe supportarlo a seconda della versione e delle impostazioni del sistema operativo.