Morton 11 de noviembre de 2012 a las 14.09
   Imprimir artículo
elWebmaster.com

JavaScript: API para activar la pantalla completa desde tu sitio web


javascriptwide2Mientras el mundo avanza a una red de verdaderas aplicaciones web, las APIs de JavaScript están haciendo lo mejor posible. Una muy simple y efectiva es la que nos permite activar la pantalla completa en el navegador directamente desde un botón en nuestro sitio. ¿Quieres probarlo?

Haz clic aquí para ver una demostración >>

El método requestFullScreen está aún prefijado en los navegadores, por lo que haremos algo de investigacíon para encontrarlo:

  1. // Encuentra el método correcto, llama al elemento correcto
  2. function launchFullScreen(element) {
  3.   if(element.requestFullScreen) {
  4.     element.requestFullScreen();
  5.   } else if(element.mozRequestFullScreen) {
  6.     element.mozRequestFullScreen();
  7.   } else if(element.webkitRequestFullScreen) {
  8.     element.webkitRequestFullScreen();
  9.   }
  10. }
  11.  
  12. // Lanza en pantalla completa en navegadores que lo soporten
  13. launchFullScreen(document.documentElement); // la página entera
  14. launchFullScreen(document.getElementById("videoElement")); // cualquier elemento individual

Simplemente llama al request del método en el elemento que quieres en pantalla completa, y la ventana cambiará a pantalla completa, con previa autorización del usuario. Recuerda que es posible que el usuario rechace este cambio. Si la pantalla completa es aceptada, las barras de herramientas y el entorno general desaparece, haciendo que el documento ocupe el ancho y alto enteros de la pantalla.

Por otro lado, si queremos cancelar la pantalla completa y regresar al tamaño normal, necesitamos el método cancelFullScreen (también prefijado en viejos navegadores):

  1. function cancelFullscreen() {
  2.   if(document.cancelFullScreen) {
  3.     document.cancelFullScreen();
  4.   } else if(document.mozCancelFullScreen) {
  5.     document.mozCancelFullScreen();
  6.   } else if(document.webkitCancelFullScreen) {
  7.     document.webkitCancelFullScreen();
  8.   }
  9. }
  10.  
  11. cancelFullscreen();

Desafortunadamente, los eventos y propiedades de la pantalla completa están prefijados, pero podemos des-prefijarlos sobre la marcha.

document.fullScreenElement: el elemento que será llevado a pantalla completa.
document.fullScreenEnabled: detecta si la pantalla completa está activada.

El evento fullscreenchange nos avisa cuando pasamos a pantalla completa o volvemos de la misma:

  1. var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
  2. var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled;

Esto quiere decir que puedes detectar qué evento es prefijado por el navegador para usarse junto al método de detección inicial de la pantalla completa.

Finalmente, en cuanto al CSS, los navegadores nos proveen con un poco de control en pantalla completa. En algunos casos, WebKit necesita un poco de ayuda, por lo que éste código te será útil si te encuentras lidiando con contenido multimedia:

  1. /* html */
  2. :-webkit-full-screen {
  3.   background: pink;
  4. }
  5. :-moz-full-screen {
  6.   background: pink;
  7. }
  8.  
  9. /* otros elementos */
  10. :-webkit-full-screen video {
  11.   width: 100%;
  12.   height: 100%;
  13. }

Eso es todo. ¡Esperamos que te sea de utilidad!

Haz clic aquí para ver una demostración >>

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Pablo Luaces dice:

    Yo he realizado un plugin que permite implementar esta función más fácilmente y con algún extra

    http://dawdeza.blogspot.com.es/2013/05/pon-tus-paginas-pantalla-completa-con.html#more

  2. Alexis Cabrera dice:

    Muy bueno el artículo, yo deseo que lo haga pero sin preguntarle al usuario porque estoy desarrollando un examen online y quiero que se muestre a pantalla completa. Algo parecido se logra en internet explorer pero lo quiero hacer en mozilla o Chrome.

  3. RafaeL dice:

    Buenas tardes muy buen script. el detalle es que lo quiero hacer en el evento load de la pagina con jaquery: $(document).ready(function(e)
    {
    launchFullScreen(document.documentElement);
    });

    y no me la carga. tiene que estar en un onClick de un botón. como podría solucionar eso ?
    gracias

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder