RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte sobre: Multimedia > Recursos Webmasters & Diseño Web

Respuesta
 
Herramientas Desplegado
Antiguo 17-nov-2012     #1
Predeterminado 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
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):

Código:
function cancelFullscreen() {
* if(document.cancelFullScreen) {
* * document.cancelFullScreen();
* } else if(document.mozCancelFullScreen) {
* * document.mozCancelFullScreen();
* } else if(document.webkitCancelFullScreen) {
* * document.webkitCancelFullScreen();
* }
}
*
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:

Código:
var fullscreenElement = document.fullScreenElement || document.mozFullScreenElement || document.webkitFullScreenElement;
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:

Código:
/* html */
:-webkit-full-screen {
* background: pink;
}
:-moz-full-screen {
* background: pink;
}
*
/* otros elementos */
:-webkit-full-screen video {
* width: 100%;
* height: 100%;
}
Eso es todo. ¡Esperamos que te sea de utilidad!

Ver demostración

menciono además que, por lo menos a mi, solo me funcionó en google chrome...

fuente: elwebmaster
Responder Citando
Usuarios que han agradecido este mensaje de RHAF
mvallejo (07-dic-2012)
Antiguo 07-dic-2012     #2
Predeterminado

Interesante, gracias por el aporte.
Responder Citando
Respuesta


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

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


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.
Ad Management by RedTyger