|
Buscador de IntercambioSOS:
|
|
Herramientas | Desplegado |
17-nov-2012 | #1 |
Novato Ingreso: agosto-2010
Mensajes: 41
Sexo: País: Signo:
Agradecido: +126
|
JavaScript: API para activar la pantalla completa desde tu sitio web
Mientras 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? El método requestFullScreen está aún prefijado en los navegadores, por lo que haremos algo de investigacíon para encontrarlo: Código:
// Encuentra el método correcto, llama al elemento correcto function launchFullScreen(element) { * if(element.requestFullScreen) { * * element.requestFullScreen(); * } else if(element.mozRequestFullScreen) { * * element.mozRequestFullScreen(); * } else if(element.webkitRequestFullScreen) { * * element.webkitRequestFullScreen(); * } } * // Lanza en pantalla completa en navegadores que lo soporten launchFullScreen(document.documentElement); // la página entera launchFullScreen(document.getElementById("videoElement")); // cualquier elemento individual 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): Código:
function cancelFullscreen() { * if(document.cancelFullScreen) { * * document.cancelFullScreen(); * } else if(document.mozCancelFullScreen) { * * document.mozCancelFullScreen(); * } else if(document.webkitCancelFullScreen) { * * document.webkitCancelFullScreen(); * } } * cancelFullscreen(); 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: Código:
var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement; var fullscreenEnabled = document.fullScreenEnabled || document.mozScreenEnabled || document.webkitScreenEnabled; 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: Código:
/* html */ :-webkit-full-screen { * background: pink; } :-moz-full-screen { * background: pink; } * /* otros elementos */ :-webkit-full-screen video { * width: 100%; * height: 100%; } Ver demostración menciono además que, por lo menos a mi, solo me funcionó en google chrome... fuente: elwebmaster |
Usuarios que han agradecido este mensaje de RHAF | ||
mvallejo (07-dic-2012) |
07-dic-2012 | #2 |
Ayudante Frecuente Ingreso: diciembre-2012
Mensajes: 260
Sexo: País: Signo:
Agradecido: +277
|
Interesante, gracias por el aporte.
|
(0 miembros y 1 visitantes) | |
Herramientas | |
Desplegado | |
|
|
Temas Similares | ||||
Tema | Autor | Foro | Respuestas | Último mensaje |
¿Sexo Virtual? Qué es, cómo se practica, etc. | cardavid | Sexualidad | 41 | 25-jun-2017 19:31 |
Regedit - Seguridad, Reestrinccion y Bloqueo | Arleanjose | XP/2000/2003/NT | 27 | 29-jul-2012 21:12 |
PROGRAMACIÓN EN ANDROID: Conceptos Generales "Parte 1" | GenuiWorld | Programación | 5 | 31-dic-2011 21:16 |
Los Servicios de Windows Professional XP | cbyte | XP/2000/2003/NT | 12 | 28-nov-2010 18:55 |
2 cosas el audio y los efectos de escritorio | dan-75 | Unix & Linux | 4 | 19-mar-2010 18:50 |