Contenido

Usando la Javascript Fullscreen API

9 may

+ 11

Si conoces Facebook, conocerás el nuevo sistema de visualizado de imágenes que permite, entre otras opciones, ver la imagen a pantalla completa, pero cuando decimos pantalla completa, es a pantalla completa, usando toda la pantalla, no usando el tamaño del elemento Window como lo usábamos antes.

¿Como es posible?

Pues debido a la implementación de la Javascript Fullscreen API :D.
Una implementación, introducida por Apple en el Safari 5.0 para los tags <video /> y que fue bien acogida en la comunidad de desarrolladores, lo que hizo que Mozilla se añadiera con una propuesta más firme en la que se extendía su uso a cualquier elemento del DOM. Y para consolidar esta buena idea, la W3C metió mano y definió la primera propuesta para estandarizar esta funcionalidad.

¿Como lo usamos?

Después de comprobar que el navegador del usuario dispone de dicha funcionalidad (que por ahora son Google Chrome 15+, Safari 5.1+ y Firefox 10+) ejecutamos la llamada RequestFullScreen() que nos cambiará a modo pantalla completa.

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
}

Una vez ya en pantalla completa, el navegador no solicitará si deseamos permitir que el dominio sobre el que usamos dicha funcionalidad debe tener permitido el uso de la Fullscreen API.

Para detectar el estado de nuestra pantalla completa disponemos del evento fullscreenchange que nos permitirá detectar un cambio sobre esta funcionalidad. Pudiendo conocer en todo momento si estamos en modo normal o modo pantalla completa.


document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

Y además, disponemos de una pseudo-clase CSS que nos permite condicionar ciertos aspectos de nuestra pantalla completa.


html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}

html:fullscreen {
    background: red;
}

Personalmente, creo que es una funcionalidad muy interesante y me ha llamado mucho la atención que se haya movido tan rápido y que podamos usarla con tantos navegadores en tan poco tiempo. Aunque al parecer, Microsoft aún no tiene claro si lo va a implementar debido a que Windows 8 ya está pensado para trabajar con Internet Explorer 10 en modo pantalla completa siempre… otra vez :(

Más Info

  • Malditos prefijos.. no entiendo que utilidad podrían tener.

    • Facil! Hay propiedades de CSS que todavia no estan definidas en APIs y que no son estándares. Cada navegador usa un prefijo para que funcione esa propoedad como el navegador la definió. Por ejemplo, los bordes redondeados:

      -moz-border-radius: 1em; // Para Mozilla
      -ms-border-radius: 1em; // Internet Explorer (No se si esta soportado)
      -webkit-border-radius: 1em; // WebKit (chorme) y Safari
      border-radius: 1em; // Para cuando se cumplan los estandares.

      Mientras no se cumplan los estándares una herramienta útil es: http://leaverou.github.com/prefixfree/

  • Tio te escribo para decirte que me alegra que hayas vuelto a postear en el blog (más allá del twitter)

    Tu blog fue al primero que me suscribí y lo tengo como referencia siempre.

  • Hola, muy buen post, quería preguntar algo, se podrá hacer que en el evento onload de la etiqueta body se haga referencia a una función js y que el contenido de esta función tenga hacer lo anterior. Mi idea principal es que cuando cargue la pagina web se coloque Fullscreen espero que me puedan ayudar. Saludos.

  • Les agradecería mucho, me urge.

  • Buenos Dias: como podria implementar para cuando levante la web se ponga fullscreen…

    me imagino que deberia ser en en body con onload.. pero los ejemplos estan sobre algun evento click o sobre el caso particular de video. Espero que me puedan ayudar saludos

  • Cual seria el evento para detectar el estado de la pantalla, porque hasta ahora intenté de todo pero no puedo lograrlo.
    Mi aplicación debe identificar al cargarse si esta en modo ventana y ofrecer la opción de pantalla completa, pero no se como detectarlo.
    Gracias.

    • @ramoneariel: En principio esto accionará cualquier funcionalidad en cuando se active el FullScreen:


      document.addEventListener("fullscreenchange", function () {
      fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
      }, false);

      document.addEventListener("mozfullscreenchange", function () {
      fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
      }, false);

      document.addEventListener("webkitfullscreenchange", function () {
      fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
      }, false);

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.