Foros del Web » Programando para Internet » Javascript »

Javascript para detener video en capas ocultas

Estas en el tema de Javascript para detener video en capas ocultas en el foro de Javascript en Foros del Web. Quiero colocar varias capas en mi página de modo que estén solapadas y que cada una de ellas contenga un vídeo flash con su propio ...
  #1 (permalink)  
Antiguo 10/08/2008, 10:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Javascript para detener video en capas ocultas

Quiero colocar varias capas en mi página de modo que estén solapadas y que cada una de ellas contenga un vídeo flash con su propio reproductor. El problema es que, si empiezas a ver un video cuando el otro no ha terminado aún, se oyen los dos a la vez, y haces lo mismo con 3, 4 o 5 suenan todos al mismo tiempo. Esto se solucionaría si el usuario parase un video antes de iniciar otro... pero queremos ponérselo fácil ¿no?.

Mi pregunta es la siguiente: ¿existe algún comportamiento por el cual cuando una capa deje de estar visible se pueda detener el vídeo?

Quizá con un 'if' (...no cotrolo muy bien el javascript), algo así como una orden de "si la capa está oculta, detener el reproductor que está en ella". ¿Alguien sabe cual sería la orden exactamente?

Gracias!!!
  #2 (permalink)  
Antiguo 10/08/2008, 10:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Javascript para detener video en capas ocultas

Lo que podés hacer es, al cambiar la visibilidad de la capa, poner su propiedad innerHTML=''; de esta manera eliminás su contenido y ya no se escuchará el video.
Otra alternativa es, también vía innerHTML o algún script como swfObject, reponer el video a su estado inicial, como lo hacés al cargar la página.
  #3 (permalink)  
Antiguo 10/08/2008, 11:08
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

¿...y cuál sería la orden?¿Puedes poner un ejemplito...?
  #4 (permalink)  
Antiguo 13/08/2008, 01:01
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

La solución del innerHTML no me sirve porque la capa se queda vacía... y si el usuario quiere volver a ver ese vídeo ya no aparece. ¿Alguien sabe si sería posible asignar un comportamiento onload a una capa para que, al hacerse visible, mandara una orden de stop a la que tenía el vídeo en marcha?
  #5 (permalink)  
Antiguo 13/08/2008, 05:07
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Javascript para detener video en capas ocultas

Básicamente, lo que hacen librerías como swfObject es reescribir el innerHTML de una capa. El procedimiento sirve, sólo hay que reescribir el object y embed del player en su estado inicial. Colocá vos el/los fragmento/s relevante/s de tu código y te mostramos cómo hacerlo.
En este enlace tenés un ejemplo de cómo, al cambiar las solapas, aunque el video esté reproduciéndose, modificando el innerHTML al estado inicial todo funciona como se espera:
http://www.disegnocentell.com.ar/eni...nie_v1.01.html

Última edición por Panino5001; 13/08/2008 a las 05:17
  #6 (permalink)  
Antiguo 13/08/2008, 13:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

Vamos a ver... He hecho un ejemplo simplificado, con un menú que solo tiene dos opciones (a la derecha) y dos capas solapadas con sus respectivos vídeos (a la izquierda).

La idea sería que al pinchar una de las opciones de menú haga visible la capa que contiene el vídeo que la corresponde y, a la vez, oculte la capa del vídeo que se estaba reproduciendo y lo detenga, para evitar que se siga escuchando.

Espero que así se entienda. Gracias por todo, Panino 5001!!!


Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#video01 {
	position:absolute;
	width:320px;
	height:198px;
	z-index:5;
}
#menu01 {
	position:absolute;
	width:200px;
	height:91px;
	z-index:3;
	left: 535px;
	top: 22px;
}
#menu03 {
	position:absolute;
	width:372px;
	height:90px;
	z-index:2;
	left: 536px;
	top: 122px;
}
#video03 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:4;
	visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>
</head>

<body onload="MM_CheckFlashVersion('8,0,0,0','El contenido de la p&aacute;gina requiere una nueva versi&oacute;n del reproductor Macromedia Flash.  Desea descargarlo ahora?');">
<div id="menu01"><a href="javascript:;" onmouseover="MM_callJS('style.cursor=\&quot;hand\&quot;')"><img src="menu-barraprograma-largo2.jpg" width="700" height="87" border="0" onclick="MM_showHideLayers('video01','','show','video03','','hide')" /></a></div>
<div id="video01">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="510" height="408" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="salign" value="lt" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video1&autoPlay=false&autoRewind=false" />
    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video1&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="510" height="408" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</div>
<div id="menu03"><a href="javascript:;" onmouseover="MM_callJS('style.cursor=\&quot;hand\&quot;')"><img src="menu-barraprograma-largo2bis.jpg" width="700" height="87" border="0" onclick="MM_showHideLayers('video01','','hide','video03','','show')" /></a></div>
<div id="video03">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="510" height="408" id="FLVPlayer1">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="salign" value="lt" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video3&autoPlay=false&autoRewind=false" />
    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video3&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="510" height="408" name="FLVPlayer1" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</div>
</body>
</html>
  #7 (permalink)  
Antiguo 13/08/2008, 13:10
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años
Puntos: 839
Exclamación Respuesta: Javascript para detener video en capas ocultas

¿Has probado con lo que te comentó Panino5001?. Con innerHTML vuelves el objeto al estado original y ya no se reproducirá.
De hecho, ya tienes el video dentro de un div así que puedes usar su id para el innerHTML.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 14/08/2008, 00:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

Sí, probé a darle a la capa un contenido vacío (innerHTML='';), pero el problema es que si, después, el usuario quiere volver a ver ese vídeo, no puede porque la capa se ha quedado vacía.

¿Cuando dices "volverlo al estado original" te refieres a darle una orden de stop y que el vídeo quede detenido? Eso, justo, es lo que quiero hacer, pero no sé como. (Me da igual que se rebobine hasta el principio, o que se quede detenido en el que punto en el que se llegue la reproducción).

¿Cuál sería la línea de código para hacerlo?

Gracias!!!
  #9 (permalink)  
Antiguo 14/08/2008, 00:21
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Javascript para detener video en capas ocultas

Lo que queremos decirte es que no dejes vacío el innerHTML sino que coloques en él el código de incrustación de tu swf. Ejemplo:
Código PHP:
document.getElementById('idDeTuCapa').innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="510" height="408" id="FLVPlayer">    <param name="movie" value="FLVPlayer_Progressive.swf" />    <param name="salign" value="lt" />    <param name="quality" value="high" />    <param name="scale" value="noscale" />    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video1&autoPlay=false&autoRewind=false" />    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Corona_Skin_3&streamName=video1&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="510" height="408" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  </object>'
(Así, sin saltos de línea)
  #10 (permalink)  
Antiguo 14/08/2008, 00:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Javascript para detener video en capas ocultas

Post Data: De esta manera, el video vuelve a la posición inicial (no podés, sin modificar el código fuente del fla, posicionarlo en un determinaado momento de la reproducción, de manera que esta es la opción más sencilla y viable)
  #11 (permalink)  
Antiguo 14/08/2008, 00:55
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

OK, Voy a probar...

Muchas gracias!!!!
  #12 (permalink)  
Antiguo 15/08/2008, 03:36
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

Funciona!!!! Muchas gracias, Panino 5001 y David el Grande!!!

Sólo hay un pequeño matiz por limar... al probarlo en mi ordenador (aún no lo he subido a ningún servidor), tarda un instante en cargar. Cada vez que pincho una opción del menú, en la parte de la pantalla donde están las capas con los vídeos, se ve lo siguiente (todo esto en un segundo, aproximadamente):

- Por un instante, fondo amarillo (el fondo que le he puesto, de prueba, es amarillo).
-Luego, por otro instante, el fondo se ve blanco.
-Luego, se ve el primer frame del video pero muy pequeño, en el angulo superior izquierdo de la capa.
-Finalmente aparece el vídeo en su tamaño normal, y listo para reproducir.

¿A qué se debe? ¿Se puede evitar?
¿Es porque hay mucha información para cargar?
¿El hecho de tener las capas superpuestas, cada una con un vídeo, ralentizará mucho la carga de la página?
Por cierto, otra duda... ¿cuando se carga la página, también carga el contenido de las capas ocultas o sólo cuando se las llama para que se hagan visibles?
  #13 (permalink)  
Antiguo 15/08/2008, 06:29
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 19 años, 11 meses
Puntos: 834
Respuesta: Javascript para detener video en capas ocultas

Cita:
Iniciado por vacyl01 Ver Mensaje
¿A qué se debe? ¿Se puede evitar?
¿Es porque hay mucha información para cargar?
¿El hecho de tener las capas superpuestas, cada una con un vídeo, ralentizará mucho la carga de la página?
Por cierto, otra duda... ¿cuando se carga la página, también carga el contenido de las capas ocultas o sólo cuando se las llama para que se hagan visibles?
Se debe a que reescribís el contenido de la capa. Que aparezca chico primero se debe al tipo de player que usás (Lo normal es que no exista resize y que la demora en la carga sea casi nula -lo único a precargar son los controles del player y las variables externas que le enviás vía javascript o xml o en la propia incrustación html- o tenga una precarga visual). Si no tenés acceso al código fuente del player no podés evitarlo.
La demora no se debe al peso del video en sí, ya que se trata de streaming, es decir, la información se descarga en paquetes pequeños a medida que se va ejecutando el video.
El tiempo de carga de la página será proporcional a la cantidad de capas ocultas que tengas, ya que, aunque estén ocultas, pertenecen al documento. Por eso, lo mejor es tener sólo una capa e ir pasando vía javascript diferentes variables (algo como esto: http://www.canaltrece.com.ar/home/) .
  #14 (permalink)  
Antiguo 15/08/2008, 11:38
 
Fecha de Ingreso: agosto-2008
Mensajes: 18
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: Javascript para detener video en capas ocultas

Excelentes respuestas. Muchas gracias... otra vez!!!
  #15 (permalink)  
Antiguo 09/02/2009, 08:29
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 21 años, 11 meses
Puntos: 1
Respuesta: Javascript para detener video en capas ocultas

Hola chicos! De casualidad encontré este post y es justo lo que necesitaba y veo que funcionó el ejemplo que puso el colega Panino5001, pero me perdí en como utilizarlo, pero básicamente la idea es la misma, al seleccionar la otra solapa, quisiera que el video de la solapa anterior se detenga y vuelva al principio.

Yo tengo estas 2 solapas tambien:

Código:
					  
<div class="indentmenu" id="indentmenu">
	<ul>
	<li><a id="livideo" href="javascript:microsup.solapas('Videos');" class="current"></a></li>
	<li><a id="lifotos" href="javascript:microsup.solapas('Fotos');" class=""></a></li>
	</ul>
</div>

				<div class="Est Caja">
			      <ul class="Sol clearfix">
			        <li id="liVideos" class="Sup">

<div style="display: block;" class="Cont" id="Videos">

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="450">
   <param name="movie" value="clientes/cl1/video/video.swf">
   <param name="quality" value="high">
   <param name="wmode" value="transparent">
   <embed src="clientes/cl1/video/<? echo $row['video']; ?>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="450"></embed>
 </object>

</div>

<div class="Cont" id="Fotos" style="display: none;">

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="797" height="450">
 <param name="movie" value="clientes/cl1/galeria.swf">
 <param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="clientes/cl1/galeria.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="797" height="450"></embed>
 </object>									

</div>


</li>
      </ul>
    </div>
Espero no estar equivocandome al preguntar esto aqui.

Saludos y gracias.

MArx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.

Última edición por marx-pola; 09/02/2009 a las 09:34
  #16 (permalink)  
Antiguo 10/02/2009, 09:53
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 21 años, 11 meses
Puntos: 1
Respuesta: Javascript para detener video en capas ocultas

Hola gente! Otra vez por acá. Lo que quisiera saber es lo siguiente... miren esta web:

http://www.crissangel.com/

Fíjense que al seleccionar la opcion CATV, ahí se reproduce un video y al seleccionar cualquier otra SOLAPA, automáticamente el video se detiene.

Cómo se hace esto desde el html?

Mil gracias por su tiempo y saludos.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #17 (permalink)  
Antiguo 10/02/2009, 12:59
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 19 años, 2 meses
Puntos: 9
Respuesta: Javascript para detener video en capas ocultas

Hola, otra solucion es ocultar la capa con display:none en vez de visibility:hidden, asi desparece y se para, para reponerla display:block ,ademas el video no se rebobina.Saludos.
  #18 (permalink)  
Antiguo 23/02/2009, 14:18
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 21 años, 11 meses
Puntos: 1
Respuesta: Javascript para detener video en capas ocultas

mmmm... no entendi mucho, pero ¿se puede modificar mi código expuesto mas arriba con lo que tu me dices?
Gracias.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #19 (permalink)  
Antiguo 28/09/2012, 07:41
 
Fecha de Ingreso: abril-2005
Mensajes: 16
Antigüedad: 19 años
Puntos: 1
Respuesta: Javascript para detener video en capas ocultas

Buenas tardes, mi problema es muy parecido pero la solución que leo no consigo implantarla.. os comento.
Cargo un video del youtube, este se abrirá en un lightbox:

<iframe type="text/html" width="400" height="397" src="http://www.youtube.com/embed/<?php echo $datos['Link_video']?>?rel=0&amp;wmode=transparent" frameborder="0"></iframe>

Pero cuando cierro el lightbox el video se queda en ejecucion... ;(

¿Como puedo hacer para que cuando le de cerrar a mi lightbox el video se detenga?.

El codigo javascript que controla el cierre de la ventana lightbox esta en el fichero moodalbox.js

// the overlay (clickable to close)
this.overlay = new Element('div').setProperty('id', 'mb_overlay').injectInside(document.body);
// the center element
this.center = new Element('div').setProperty('id', 'mb_center').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);
// the actual page contents
this.contents = new Element('div').setProperty('id', 'mb_contents').injectInside(this.center);

// the bottom part (caption / close)
this.bottom = new Element('div').setProperty('id', 'mb_bottom').setStyle('display', 'none').injectInside(document.body);
this.closelink = new Element('a').setProperties({id: 'mb_close_link', href: '#'}).injectInside(this.bottom);
this.caption = new Element('div').setProperty('id', 'mb_caption').injectInside(this.bottom);
new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

Cualquier ayuda se agradece y mucho !!!

Un saludo a todos los colaboradores !
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 20:33.