Verificare se una pagina è in primo piano con le PageVisibility API di HTML5



Le PageVisibility API permettono di determinare se la pagina è visibile o meno.

Quando si minimizza la pagina o ci si sposta in un'altra scheda viene scatenato un evento che può essere intercettato e utilizzato per diversi scopi: mettere in pausa un gioco, fermare un carousel di immagini, mettere in pausa delle attività in background della pagina o mettere in pausa la riproduzione di un contenuto audio/video.

Nel codice di esempio mi soffermo proprio sull'ultimo punto: ho realizzato una semplice pagina che avvia immediatamente la riproduzione di una clip video (tratta dal divertente Big Buck Bunny) e si occupa di mettere in pausa e riavviare il video quando la visibilità della scheda cambia.

La versione corrente delle PageVisibilityAPI definisce due proprietà del documento: il boolean hidden e l'enumeratore visibilityState.
La proprietà visibilityState attualmente ha quattro valori possibili: "hidden", "visible", "prerender", and "unloaded".

Queste proprietà sono attualmente vendor-prefixed, quindi fino a quando la funzionalità non sarà diventata ufficiale sarà necessario specificare i prefissi specifici per ogni browser: proprio per questo motivo, nel codice di esempio sono implementate una coppia di funzioni (righe 12-29) che si occupano di ciclare tutti i prefissi conosciuti alla ricerca di quello corretto per il browser che sta eseguendo lo script.



Published: June 11 2013

  • category: