Foros del Web » Programando para Internet » Javascript »

Modo pantalla negro para visualizar video

Estas en el tema de Modo pantalla negro para visualizar video en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/07/2010, 08:56
 
Fecha de Ingreso: julio-2009
Mensajes: 82
Antigüedad: 14 años, 8 meses
Puntos: 4
Modo pantalla negro para visualizar video

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
  #2 (permalink)  
Antiguo 27/07/2010, 09:53
 
Fecha de Ingreso: julio-2003
Ubicación: Cochabamba Bolivia
Mensajes: 300
Antigüedad: 20 años, 8 meses
Puntos: 14
Respuesta: Modo pantalla negro para visualizar video

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.
__________________
:policia: Uno para todos y todos para uno.
  #3 (permalink)  
Antiguo 28/07/2010, 09:44
 
Fecha de Ingreso: julio-2009
Mensajes: 82
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Modo pantalla negro para visualizar video

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.
  #4 (permalink)  
Antiguo 28/07/2010, 12:39
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 2 meses
Puntos: 126
Respuesta: Modo pantalla negro para visualizar video

Hola

A ver si es esto lo que buscas
Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function solonumeros(evt) {
  6. var keyPressed = (evt.which) ? evt.which : event.keyCode
  7.     return !(keyPressed > 31 && (keyPressed < 48 || keyPressed > 57));
  8. }
  9.  
  10.  
  11. function calculalo() {
  12.     document.getElementById('elalto').value=parseInt((document.getElementById('elancho').value*662)/994);
  13. }
  14.  
  15.  
  16. var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
  17. function iecompattest() {
  18.     return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  19. }
  20.  
  21.  
  22.  
  23. function cambialo() {
  24. // Esto ha de estar antes que var cabecera_height
  25. var ancho_video = document.getElementById('elancho').value;
  26. var alto_video = document.getElementById('elalto').value;
  27.     document.getElementById('elvideo').style.width=ancho_video;
  28.     document.getElementById('elvideo').style.height=alto_video;
  29. // Fin condicion
  30.  
  31. var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
  32. var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
  33. //FF
  34. //var cabecera_height =  document.getElementById('contenido').clientHeight;
  35. //var pie_height =  document.getElementById('pie').clientHeight;
  36. //var cabecera_width =  document.getElementById('contenido').clientWidth;
  37. //IE
  38. //var cabecera_height =  document.getElementById('contenido').scrollHeight;
  39. //var pie_height =  document.getElementById('pie').scrollHeight;
  40. //var cabecera_width =  document.getElementById('contenido').scrollWidth;
  41.  
  42. if (document.Element || document.body){
  43. var cabecera_height =  document.getElementById('contenido').scrollHeight;
  44. var pie_height =  document.getElementById('pie').scrollHeight;
  45. var cabecera_width =  document.getElementById('contenido').scrollWidth;
  46. } else {
  47. var cabecera_height =  document.getElementById('contenido').clientHeight;
  48. var pie_height =  document.getElementById('pie').clientHeight;
  49. var cabecera_width =  document.getElementById('contenido').clientWidth;
  50. }
  51.  
  52.  
  53. var total_Height = parseInt(cabecera_height) + parseInt(pie_height);
  54.  
  55. //alert("Ventana disponible largo " + window_height)
  56. //alert("Ventana disponible ancho " + window_width)
  57. //alert("Ancho Video " + ancho_video)
  58. //alert("Ancho Cabecera " + cabecera_width)
  59. //alert("Total " +total_Height)
  60.  
  61.    
  62.  
  63.         if (total_Height < window_height) {
  64.             document.getElementById('veocine').style.height= window_height;
  65.         }
  66.         else
  67.         {
  68.             document.getElementById('veocine').style.height=total_Height;
  69.         }
  70.  
  71.         if (ancho_video < cabecera_width) {
  72.             document.getElementById('veocine').style.width=window_width;
  73.         }
  74.         else
  75.         {
  76.             document.getElementById('veocine').style.width=parseInt(ancho_video)+20;
  77.         }
  78.  
  79. }
  80.  
  81.  
  82.  
  83.  
  84. function modocine() {
  85. var cuentanos = 0;
  86. var decimas = 0;
  87. document.getElementById('veocine').style.display='';
  88. while (cuentanos < 80) {
  89. decimas = cuentanos/100;
  90. document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
  91. document.getElementById('veocine').style.MozOpacity=decimas;
  92. document.getElementById('veocine').style.opacity=decimas;
  93. document.getElementById('veocine').style.khtmlOpacity=decimas;
  94. cuentanos += 10;
  95. cuentanos = parseInt(cuentanos);
  96. }
  97. document.getElementById('modocine').style.display='none';
  98. document.getElementById('modocine').style.visibility='hidden';
  99. document.getElementById('modonormal').style.display='';
  100. document.getElementById('modonormal').style.visibility='visible';
  101. }
  102.  
  103.  
  104. function modonormal() {
  105. var cuentanos = 100;
  106. var decimas = 1;
  107. document.getElementById('veocine').style.display='none';
  108. while (cuentanos <= 80) {
  109. decimas = cuentanos/100;
  110. document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
  111. document.getElementById('veocine').style.MozOpacity=decimas;
  112. document.getElementById('veocine').style.opacity=decimas;
  113. document.getElementById('veocine').style.khtmlOpacity=decimas;
  114. cuentanos -= 10;
  115. cuentanos = parseInt(cuentanos);
  116. }
  117. document.getElementById('modonormal').style.display='none';
  118. document.getElementById('modonormal').style.visibility='hidden';
  119. document.getElementById('modocine').style.display='';
  120. document.getElementById('modocine').style.visibility='visible';
  121. }
  122.  
  123.  
  124. function opacidad(valor) {
  125. cuentanos = document.getElementById('veocine').style.MozOpacity*100;
  126. switch (valor) {
  127.  case "mas":
  128.  if(cuentanos < 100) {
  129.  cuentanos += 10;
  130.  cuentanos = parseInt(cuentanos);
  131.  decimas = cuentanos/100;
  132.  document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
  133.  document.getElementById('veocine').style.MozOpacity=decimas;
  134.  document.getElementById('veocine').style.opacity=decimas;
  135. document.getElementById('veocine').style.khtmlOpacity=decimas;
  136. }
  137.  break;
  138.  case "menos":
  139.  if(cuentanos > 30) {
  140.  cuentanos -= 10;
  141.  cuentanos = parseInt(cuentanos);
  142.  decimas = cuentanos/100;
  143.  document.getElementById('veocine').style.filter='alpha(opacity='+cuentanos+')';
  144.  document.getElementById('veocine').style.MozOpacity=decimas;
  145.  document.getElementById('veocine').style.opacity=decimas;
  146.  document.getElementById('veocine').style.khtmlOpacity=decimas;
  147.  }
  148.  break;
  149. }
  150. }
  151. </script>
  152. </head>
  153. <body>
  154.  
  155.  
  156. <div id="contenido" align="center" style="" valign="top">
  157. <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);">
  158. <div id="modonormal" style="margin-top: 20px; display: none;">
  159. <input type="button" onclick="modonormal()" value="Desactivar Modo Cine"/>
  160. <input type="button" onclick="opacidad('menos')" value="-"/>
  161. <input type="button" onclick="opacidad('mas')" value="+"/>
  162. </div>
  163. </div>
  164.  
  165. <div align="center">
  166. <i><font color="red">* Introduce unos valores numericos para cambiar el tamaño del video (ancho/alto)</font></i>
  167. <br/>
  168. <i><font color="red">* el cambio de tamaño no resetea la carga del video, puedes usarlo sin problemas.</font></i>
  169. <div>
  170. ANCHO: <input id="elancho" type="text" onkeypress="return solonumeros(event)" onkeyup="calculalo()" maxlength="4" size="10" value="390"/>
  171. ALTO: <input id="elalto" type="text" disabled="disabled" onkeypress="return solonumeros(event)" maxlength="4" size="10" value="259"/>
  172. <input type="button" onclick="cambialo()" value="Cambiar Tamaño"/>
  173. <input type="button" id="modocine" onclick="modocine()" value="Activar Modo Cine"/>
  174. </div>
  175.  
  176.  
  177. <div style="z-index:3;">
  178. <center>
  179. <object  width="390px" height="259px">
  180. <param name="movie" value="http://www.youtube.com/v/3BPDMXhXeAU&hl=es&fs=1&"></param>
  181. <param name="allowFullScreen" value="true"></param>
  182. <param name="allowscriptaccess" value="always"></param>
  183. <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>
  184. </object>
  185. </center>
  186. </div>
  187.  
  188. <br/>
  189.  
  190. <div id="pie" align="center" style="z-index: 3; font-family: verdana,arial; font-size: 12px; font-weight: bold;position:relative; bottom:2px;">
  191. Resto de la p&aacute;gina
  192. <br/>
  193. Todos los videos ent&aactue;n alojados en servidor ajenos
  194. </div>
  195.  
  196. </body>
  197. </html>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 01/08/2010, 14:03
 
Fecha de Ingreso: julio-2009
Mensajes: 82
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Modo pantalla negro para visualizar video

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
  #6 (permalink)  
Antiguo 02/08/2010, 07:09
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 2 meses
Puntos: 126
Respuesta: Modo pantalla negro para visualizar video

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
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #7 (permalink)  
Antiguo 02/08/2010, 13:33
 
Fecha de Ingreso: julio-2009
Mensajes: 82
Antigüedad: 14 años, 8 meses
Puntos: 4
Respuesta: Modo pantalla negro para visualizar video

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

Etiquetas: modo, negro, pantalla, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:00.