HTML5: utilizzare le Fullscreen API



Le Fullscreen API forniscono metodi per richiedere all'utente la visualizzazione a tutto schermo dell'intera pagina o di un particolare elemento.

L'utilizzo è semplice, tuttavia non trattandosi ancora di una funzionalità standard va utilizzato con i vendor-prefix: si rende quindi necessario un piccolo layer di compatibilità.

Vediamo come realizzarlo.


Per prima cosa definisco due funzioni che cercano il metodo corretto per il browser che sta visualizzando il documento e lo richiamano: una per l'ingresso in modalità fullscreen (righe 7-17) e una per l'uscita (righe 19-29).

La funzione enterFullScreen può essere utilizzata in 2 modi: per far entrare in fullscreen l'intera pagina

enterFullScreen(document.documentElement);

o solamente un particolare elemento del DOM, ad esempio un video:

enterFullScreen(document.getElementById('videoObj'))

exitFullScreen() viene invece richiamata senza parametri.

Compatibile con Safari, Chrome, Firefox


Published: June 20 2013

  • category: