Utilizzare le Fullscreen API di HTML5 in IE11

di Daniele Bochicchio, in HTML5, CSS3,

Nello script #50 abbiamo visto come utilizzare le Fullscreen API di HTML5:
https://www.html5italia.com/script/50/Visualizzare-Contenuti-Fullscreen-HTML5.aspx

Al momento della pubblicazione dello script, IE non aveva ancora un supporto per questa feature, che è stata aggiunta nella recente versione 11.
Dato che queste specifiche non sono ancora stabili, il relativo codice viene attivato attraverso un vendor prefix da tutti i browser a disposizione: quello che vedremo in questo script è l'implementazione delle specifiche fatta da IE11.

L'esempio riportato nello script #50 diventa questo di seguito, dove sono omessi gli altri vendor prefix, per semplicità:

$("#fullscreenDiv").bind('click', function (evt) {
  var docElm = evt.target;

  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen();
  }
  //...

});

Come comportamento predefinito, al click sull'elemento, verrà aperto il relativo contenuto in full screen: IE11, però, applica un colore nero di sfondo, che può essere cambiato. E' sufficiente utilizzare uno stile CSS come quello riportato, per controllarne il colore:

:-ms-fullscreen {
  background: white;
  color: red;
}

Le API lavorano in maniera tale che qualsiasi elemento possa essere messo in full screen: c'è da sottolineare, però, che solo il video viene automaticamente esteso fino a coprire l'intera area, mentre tutti gli altri elementi restano della dimensione impostata.

Di default gli iframe non sono consentiti ed è necessario impostare sul tag l'attributo allowfullscreen per richiederne l'accesso alle Fullscreen API.

L'utente può uscire dal fullscreen premendo sul pulsante ESC, oppure invocando il metodo msExitFullscreen.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi