Modo pantalla negro para visualizar video

mafito · #1 (**permalink**) 27/07/2010, 08:56

Hola, en primer lugar no se si lo que busco está realizado con Javascript, pero era a lo único que me sonaba, así que espero que me lo podáis resolver un poco.

Estoy buscando un "script (creo)" que su función es que activandolo desde una web donde tienes añadido un vídeo, toda la web se vuelve "oscura / en negro" a excepción del vídeo. En algunas webs lo he visto con el nombre de "Modo cine", pero no llego a encontrarlo.

A ver si me podéis echar un cable.

Saludos

sander · #2 (**permalink**) 27/07/2010, 09:53

Hola, si te entendi bien lo que estas buscando es un light box, en tu caso para videos.

Mira puedes usar el siguiente script es refacil de usar.

http://videobox-lb.sourceforge.net/

Ahi mismo tienes ejemplos y el codigo necesario para copiar y pegar.

Saludos.

mafito · #3 (**permalink**) 28/07/2010, 09:44

Primeramente gracias por responder.

Lo que busco es algo parecido a esto:

Ejemplo

Si te fijas, debajo del reproductor hay un botón llamado: Modo Cine, que si lo presionas hace la función que andaba comentando.

Adler · #4 (**permalink**) 28/07/2010, 12:39

Hola

A ver si es esto lo que buscas

Código Javascript:

Ver original<html>
<head>
<title></title>
<script type="text/javascript">
function solonumeros(evt) {
var keyPressed = (evt.which) ? evt.which : event.keyCode
    return !(keyPressed > 31 && (keyPressed < 48 || keyPressed > 57));
}
 
 
function calculalo() {
    document.getElementById('elalto').value=parseInt((document.getElementById('elancho').value*662)/994);
}
 
 
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function iecompattest() {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
 
 
function cambialo() {
// Esto ha de estar antes que var cabecera_height
var ancho_video = document.getElementById('elancho').value;
var alto_video = document.getElementById('elalto').value;
    document.getElementById('elvideo').style.width=ancho_video;
    document.getElementById('elvideo').style.height=alto_video;
// Fin condicion
 
var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
//FF
//var cabecera_height =  document.getElementById('contenido').clientHeight;
//var pie_height =  document.getElementById('pie').clientHeight;
//var cabecera_width =  document.getElementById('contenido').clientWidth;
//IE
//var cabecera_height =  document.getElementById('contenido').scrollHeight;
//var pie_height =  document.getElementById('pie').scrollHeight;
//var cabecera_width =  document.getElementById('contenido').scrollWidth;
 
if (document.Element || document.body){
var cabecera_height =  document.getElementById('contenido').scrollHeight;
var pie_height =  document.getElementById('pie').scrollHeight;
var cabecera_width =  document.getElementById('contenido').scrollWidth;
} else {
var cabecera_height =  document.getElementById('contenido').clientHeight;
var pie_height =  document.getElementById('pie').clientHeight;
var cabecera_width =  document.getElementById('contenido').clientWidth;
}
 
 
var total_Height = parseInt(cabecera_height) + parseInt(pie_height);
 
//alert("Ventana disponible largo " + window_height)
//alert("Ventana disponible ancho " + window_width)
//alert("Ancho Video " + ancho_video)
//alert("Ancho Cabecera " + cabecera_width)
//alert("Total " +total_Height) 
 
    
 
        if (total_Height < window_height) { 
            document.getElementById('veocine').style.height= window_height;
        }
        else
        {
            document.getElementById('veocine').style.height=total_Height;
        }
 
        if (ancho_video < cabecera_width) {
            document.getElementById('veocine').style.width=window_width;
        }
        else
        {
            document.getElementById('veocine').style.width=parseInt(ancho_video)+20;
        }
 
}
 
 
 
 
function modocine() {
var cuentanos = 0;
var decimas = 0;
document.getElementById('veocine').style.display='';
while (cuentanos < 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos += 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modocine').style.display='none';
document.getElementById('modocine').style.visibility='hidden';
document.getElementById('modonormal').style.display='';
document.getElementById('modonormal').style.visibility='visible';
}
 
 
function modonormal() {
var cuentanos = 100;
var decimas = 1;
document.getElementById('veocine').style.display='none';
while (cuentanos <= 80) {
decimas = cuentanos/100;
document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
document.getElementById('veocine').style.MozOpacity=decimas;
document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
cuentanos -= 10;
cuentanos = parseInt(cuentanos);
}
document.getElementById('modonormal').style.display='none';
document.getElementById('modonormal').style.visibility='hidden';
document.getElementById('modocine').style.display='';
document.getElementById('modocine').style.visibility='visible';
}
 
 
function opacidad(valor) {
cuentanos = document.getElementById('veocine').style.MozOpacity*100;
switch (valor) {
 case "mas":
 if(cuentanos < 100) {
 cuentanos += 10;
 cuentanos = parseInt(cuentanos);
 decimas = cuentanos/100;
 document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
 document.getElementById('veocine').style.MozOpacity=decimas;
 document.getElementById('veocine').style.opacity=decimas;
document.getElementById('veocine').style.khtmlOpacity=decimas;
}
 break;
 case "menos":
 if(cuentanos > 30) {
 cuentanos -= 10;
 cuentanos = parseInt(cuentanos);
 decimas = cuentanos/100;
 document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
 document.getElementById('veocine').style.MozOpacity=decimas;
 document.getElementById('veocine').style.opacity=decimas;
 document.getElementById('veocine').style.khtmlOpacity=decimas;
 }
 break;
}
}
</script>
</head>
<body>
 
 
<div id="contenido" align="center" style="" valign="top">
<div id="veocine" style="overflow: auto; display: none; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 2; left: 0px; top: 0px; background-color: rgb(0, 0, 0);">
<div id="modonormal" style="margin-top: 20px; display: none;">
<input type="button" onclick="modonormal()" value="Desactivar Modo Cine"/>
<input type="button" onclick="opacidad('menos')" value="-"/>
<input type="button" onclick="opacidad('mas')" value="+"/>
</div>
</div>
 
<div align="center">
<i><font color="red">* Introduce unos valores numericos para cambiar el tamaño del video (ancho/alto)</font></i>
<br/>
<i><font color="red">* el cambio de tamaño no resetea la carga del video, puedes usarlo sin problemas.</font></i>
<div>
ANCHO: <input id="elancho" type="text" onkeypress="return solonumeros(event)" onkeyup="calculalo()" maxlength="4" size="10" value="390"/>
ALTO: <input id="elalto" type="text" disabled="disabled" onkeypress="return solonumeros(event)" maxlength="4" size="10" value="259"/>
<input type="button" onclick="cambialo()" value="Cambiar Tamaño"/>
<input type="button" id="modocine" onclick="modocine()" value="Activar Modo Cine"/>
</div>
 
 
<div style="z-index:3;">
<center>
<object  width="390px" height="259px">
<param name="movie" value="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="elvideo" src="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="390px" height="259px"></embed>
</object>
</center>
</div>
 
<br/>
 
<div id="pie" align="center" style="z-index: 3; font-family: verdana,arial; font-size: 12px; font-weight: bold;position:relative; bottom:2px;">
Resto de la p&aacute;gina
<br/>
Todos los videos ent&aactue;n alojados en servidor ajenos
</div>
 
</body>
</html>

Suerte

mafito · #5 (**permalink**) 01/08/2010, 14:03

Hola Adler, gracias por responder.

Creo que es a eso a lo que me refiero, exactamente eso, pero no me funciona, a lo mejor tiene algún error tu código, por que pulso e botón de Activar Modo cine y no hace nada. Tampoco funciona el de cambiar el tamaño del vídeo.

Saludos

Adler · #6 (**permalink**) 02/08/2010, 07:09

Hola

Algo has de estar haciendo mal. Acabo de probarlo, creo que lo probé antes de imprimirlo, y funciona en IE8, FF, Chrome y Opera. De otros navegadores no te puedo decir

Suerte

mafito · #7 (**permalink**) 02/08/2010, 13:33

Vale lo siento, tienes razón si funciona, no me funcionaba en mi PC no se por que, pero acabo de subirlo a mi host y funciona perfectamente.

Muchas gracias :P