Comunidad de diseño web y desarrollo en internet online

Detener vídeo en capas ocultas

Citar            
MensajeEscrito el 13 Ago 2008 07:21 am
Hola!!!

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 controlo muy bien el javascript), algo así como una orden de "si la capa está oculta, detener el reproductor que está en ella". También había pensado en un comportamiento onLoad, para que cuando una capa se cargue, se pare el video de la capa que pasa a estar oculta. Una tercera opción podría ser un comportamiento onclick para que, al pulsar la imagen del menú correspondiente a un video, se detenga el que estaba reproduciéndose. Todo eso son posiblidades pero no sé si realmente se puede ahcer ni tampoco con que orden ... ¿Alguien sabe cual sería la orden exactamente?

Gracias!!!

Por vacyl01

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 13 Ago 2008 08:26 pm
Inserta los vídeos y ponles el autostart en false. Checa este enlace podría serte de ayuda

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 14 Ago 2008 07:35 am
Me han sugerido otras posibilidades, con innerHTML, pero esta opción no la conocía... He echado un vistazo al link pero no termino de entenderlo. Aquí te dejo un ejemplo simplificado de mi código... ¿Puedes echarme una mano?

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> 
       

Por vacyl01

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 14 Ago 2008 11:21 am
La cosa no tiene pinta de poder ser resuelta con un código accesible, ni crossbrowser.

En IE, controlaba las reproducciones con obj.play(), pero creo recordar que eso no funcionaba en FF.
Además, dependes del reproductor que tenga instalado el visitante, y demás...
Por lo dicho, creo que sería mejor desarrollar toda esa interface, en Flash.

Si no... investiga con los métodos "play()" y "stop()".

Aún así... creo que te falta base de JavaScript, y creo que es muy necesario para lo que pides.

PD: sí, al cargar la página, deberías hacer como dice Aoyama: poner autostart="false" en los vídeos.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.