control de carga de videos

Citar

Escrito el 07 Mar 2013 08:39 am

hola de nuevo

a ver si me podeis explicar porque no me funciona el siguiente control de carga de videos.

pongamos que el html es el siguiente:

Código :

<body onload='addlisteners'>
<div class='videoplayer'>
<video src='video1.mp4' type='video/mp4'></video>
<p id='loadStatus'>movie loading...</p>
</div>
<div class='videoplayer'>
<video src='video2.mp4' type='video/mp4'></video>
<p id='loadStatus'>movie loading...</p>
</div>
</body>

y el js, el siguiente:

Código :

function getPercentProg(vd,tg) {
   var endBuf = vd.buffered.end(0);
   var soFar = parseInt(((endBuf / vd.duration) * 100));
   var stat = tg.getElementsByTagName('p')[0];
   stat.innerHTML = soFar + '%';   
}
function myAutoPlay(vd,tg) {
   vd.play();
   x = tg.getElementsByTagName('p')[0];
   tg.removeChild(x);
}
function addlisteners(){   
   var divs = document.querySelectorAll('.video-player');
   var videos = document.querySelectorAll('video');   
   videos[0].addEventListener('progress', function() { getPercentProg(videos[0],divs[0]) }, false);
   videos[0].addEventListener('canplaythrough', function() { myAutoPlay(videos[0],divs[0]); }, false);
}

cabe decir que este codigo funciona: detecta el video 1, empieza a cargar y muestra un porcentaje de carga, que es eliminado al hacer autoplay.
para el segundo video, si cambio la funcion addlisteners por la que sigue, tambien funciona

Código :

function addlisteners(){   
   var divs = document.querySelectorAll('.video-player');
   var videos = document.querySelectorAll('video');   
   videos[0].addEventListener('progress', function() { getPercentProg(videos[0],divs[0]) }, false);
   videos[0].addEventListener('canplaythrough', function() { myAutoPlay(videos[0],divs[0]); }, false);   
   videos[1].addEventListener('progress', function() { getPercentProg(videos[1],divs[1]) }, false);
   videos[1].addEventListener('canplaythrough', function() { myAutoPlay(videos[1],divs[1]); }, false);
}

el problema viene cuando en el html tengo muchos mas videos y quiero realizar un bucle en la funcion addlisteners. deja de funcionar...

Código :

function addlisteners(){   
   var divs = document.querySelectorAll('.video-player');
   var videos = document.querySelectorAll('video');
   for (i = 0; i < videos.length; i++) {
      videos[i].addEventListener('progress', function() { getPercentProg(videos[i],divs[i]) }, false);
      videos[i].addEventListener('canplaythrough', function() { myAutoPlay(videos[i],divs[i]); }, false);
   }
}

incluso poniendo lo siguiente, tampoco funciona:

Código :

i=0;
videos[i].addEventListener('progress', function() { getPercentProg(videos[i],divs[i]) }, false);
videos[i].addEventListener('canplaythrough', function() { myAutoPlay(videos[i],divs[i]); }, false);
i=1;
videos[i].addEventListener('progress', function() { getPercentProg(videos[i],divs[i]) }, false);
videos[i].addEventListener('canplaythrough', function() { myAutoPlay(videos[i],divs[i]); }, false);

alguien podria explicarme donde esta el error...?

milchisimas gracias

Por kaquna

68 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Citar

Escrito el 07 Mar 2013 12:27 pm

Haz la traza del código con algún debuger. Seguramente el problema debe ser una tontería pero es necesario tener el código completo para ello.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 07 Mar 2013 12:45 pm

veo que el problema viene del manejo de eventos en general:

el siguiente codigo funciona

Código HTML :

<html>
<head>
<script>
function nuevoEvento(elemento, evento, funcion) { elemento.addEventListener(evento, funcion, false); } 
function mensaje() { alert("boton pulsado"); } 
function inicia() {
   var divs = document.querySelectorAll('.btn');
       nuevoEvento(divs[0],"click",mensaje);
}
</script>
</head>
<body onload="inicia()">
   <button class='btn'>Hola0</button>
   <button class='btn'>Hola1</button>
   <button class='btn'>Hola2</button>
   <button class='btn'>Hola3</button>
   <button class='btn'>Hola4</button>
</body>
</html>

pero el siguiente no:

Código HTML :

<html>
<head>
<script>
function nuevoEvento(elemento, evento, funcion) { elemento.addEventListener(evento, funcion, false); } 
function mensaje() { alert("boton pulsado"); } 
function inicia() {
   var divs = document.querySelectorAll('.btn');
       for (i = 0; i < divs.length; i++) {
              nuevoEvento(divs[i],"click",mensaje);
       }
}
</script>
</head>
<body onload="inicia()">
   <button class='btn'>Hola0</button>
   <button class='btn'>Hola1</button>
   <button class='btn'>Hola2</button>
   <button class='btn'>Hola3</button>
   <button class='btn'>Hola4</button>
</body>
</html>

¿como se pueden asignar eventos a varios elementos?

mil gracias

Por kaquna

68 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Citar

Escrito el 07 Mar 2013 02:55 pm

pues ya lo he solucionado...

resulta que la variable i, cuando era enviada a traves del evento, perdia el valor del bucle. he tenido que usar una closure para poder enviar dicha variable...

gracias

Por kaquna

68 de clabLevel

Genero:Femenino

Envíale un mensaje privado

control de carga de videos

Escribe una respuesta rapida