Fullscreen API

Activando modo de pantalla completa

Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento <video>), puedes presentarlo en pantalla completa, simplemente invocando a su mtodo requestFullscreen().

Consideremos este elemento <video>:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

Podemos poner este video en pantalla completa con un script como ste:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

Diferencias de presentacin

Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automticamente aade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "width: 100%; height: 100%". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamao original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas aadir manualmente las reglas CSS "width: 100%; height: 100%;" al elemento:

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitaras colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y ser dicho elemento contenedor el que se establecer para aparecer en pantalla completa.

Notificacin

Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento fullscreenchange. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento fullscreenchange. Ntese que el evento fullscreenchange no provee informacin alguna sobre si el documento est entrando o saliendo a modo de pantalla completa, pero puedes saber si est en dicho modo si la propiedad fullscreenElement del documento no es nula.

Cuando la solicitud de pantalla completa falla

No es garanta que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos <iframe> tienen un atributo allowfullscreen para decidir si se permitir que el contenido se muestre en pantalla completa. Adems, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento as), no funcionar. En su lugar, el elemento que solicit la pantalla completa recibir un evento fullscreenerror. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrar un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.

Saliendo del modo de pantalla completa

El usuario siempre tendr la habilidad de salir del modo de pantalla completa por su propia cuenta; vase Cosas que los usuarios querrn saber. Incluso se puede hacer programticamente, llamando al mtodo exitFullscreen().

Otra informacin

El objeto document provee informacin adiciional que puede ser til al desarrollar aplicaciones de pantalla completa:

fullscreenElement

El atributo fullscreenElement apunta al elemento actualmente en modo pantalla. Si no es nulo, el documento est en pantalla completa, y si es nulo, no lo est.

fullscreenEnabled

El atributo fullscreenEnabled indica si el documento est actualmente en un estado que permitira solicitudes al modo de pantalla completa.

Cosas que los usuarios querrn saber

Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla ESC (o F11) para salir del modo de pantalla completa.

Adicionalmente, navegando a otra pgina, cambiando de pestaa, o cambiando a otra aplicacin(usando, por ejemplo, Alt-Tab) mientras se est en pantalla completa, tambin se saldr de dicho modo.

Ejemplo

En este ejemplo, se presenta un video en una pgina web. Presionando la tecla Return o Enter el usuario podr moverse entre modo de ventana o de pantalla completa para la presentacin del video.

Ver ejemplo en vivo

Observando la tecla Enter

Cuando la pgina se carga, este cdigo se ejecuta para establecer un evento para cuando se presione la tecla Enter.

document.addEventListener(
  "keydown",
  function (e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  },
  false,
);

Cambiando entre modo de pantalla completa y modo de ventana

Este cdigo es llamado cuando el usuario presiona la tecla Enter, como se ve arriba.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

En este cdigo, primero se observa si el atributo fullscreenElement de document (comprobando si tiene prefijo moz, ms, o webkit). Si es null, el documento est en modo de ventana actualmente, as que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la funcin element.requestFullscreen().

Si el modo de pantalla completa est activado (fullscreenElement no es null), llamamos a la funcin document.exitFullscreen().

Especificaciones

Compatibilidad con navegadores

api.Document.fullscreenElement

api.Document.fullscreenEnabled

api.Document.exitFullscreen

api.Element.requestFullscreen

Vase tambin

• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen