Slashpub

vrubert's blog

API Fullscreen Para Navegadores

La API fullscreen para navegadores es una característica (todavía en fase experimental) que ya implementan las nuevas versiones de Chrome. En Firefox 9 viene implementada pero no está habilitada, a partir de la versión 10 ya vendrá activada por defecto.

El uso de la API es muy simple, se resume en lo siguiente: Podemos coger un bloque multimedia de la web que estamos desarrollando (un video, una imagen, un canvas) y ampliarlo a pantalla completa para enfocar la atención del usuario a esa zona de nuestra web, consiguiendo así que el visitante se concentre y visualice mejor ese elemento.

Las llamadas a la API son muy concretas. Para pasar a pantalla completa un elemento, llamamos (vía javascript) a la función RequestFullScreen desde el propio elemento. Y para volver al modo normal, llamamos a la función CancelFullScreen desde el elemento document.

1
2
3
4
5

div.RequestFullScreen(); // Solicita la activación de pantalla completa 
                         // sobre el elemento div que queramos

document.CancelFullScreen(); // Cancela la pantalla completa y vuelve al modo
                             // de visualización normal

Dispondremos también del evento fullscreenchange que se dispara cuando se detecta el paso al modo pantalla completa. Ejemplo:

1

document.addEventListener('fullscreenchange', on_fullscreen_change);

Finalmente, tenemos una propiedad de sólo lectura que nos informa si el navegador está en modo fullscreen.

1

document.FullScreen // tendrá un valor true o false

Para terminar, simplemente comentar que mientras se estandariza la API, cada navegador la implementa por su cuenta, y como viene siendo habitual, necesitaremos llamar a estas funciones de manera diferente según el navegador (mozRequestFullScreen, webkitCancelFullScreen, etc.).

Podéis ver mejor todo esto en la demo siguiente: http://dev.micronautas.com/demos/fullscreen/fullscreen.html

En la versión actual de Firefox (v9.0.1) tendréis que habilitar la variable full-screen-api.enabled entrando en el about:config para poder probarlo.

Enlaces de interes:

Comments