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