[SOLUCIONADO] control de carga de videos

kaquna · #1 (**permalink**) 07/03/2013, 02:39

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

kaquna · #2 (**permalink**) 07/03/2013, 06:50

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

el siguiente codigo funciona

Código:

<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>
<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

IsaBelM · #3 (**permalink**) 07/03/2013, 07:12

debería de funcionar. los cambios que yo haría serían estos

Cita:

var divs = document.querySelectorAll('button.btn');
for (var i = 0; i < divs.length; i++) {
nuevoEvento(divs[i],"click",function() {mensaje()});

ten en mente que ie8- no acepta el método addEventListener()

kaquna · #4 (**permalink**) 07/03/2013, 07:20

gracias por tu respuesta, IsaBelM, pero sigue sin funcionar... creo que debe pasar algo con eventos y bucles, pero mi escaso conocimiento me impide ver mas alla...

IsaBelM · #5 (**permalink**) 07/03/2013, 07:30

lo he probado y funciona. puedes hacer estas correcciones, pero ya te digo que el código es correcto

Cita:

<!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=utf-8" />
<title>Documento sin título</title>
<script>
//function nuevoEvento(elemento, evento, funcion) { elemento.addEventListener(evento, funcion, false); }

function nuevoEvento(elemento, nomevento, fnc) {

if (elemento.addEventListener) {
elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
}
}

function mensaje() { alert("boton pulsado"); }
function inicia() {
var divs = document.querySelectorAll('button.btn');
for (var i = 0; i < divs.length; i++) {
nuevoEvento(divs[i],"click",function() {mensaje()});
}
}

window.onload = function(){inicia()};
</script>
</head>
<body>
<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>

kaquna · #6 (**permalink**) 07/03/2013, 07:51

MIL GRACIAS, IsaBelM!
he probado tu codigo y funciona... asi que ahora voy a ver por que a mi no me funcionaba.

kaquna · #7 (**permalink**) 07/03/2013, 09:00

tambien he comprobado que mi codigo en los videos seguia fallando pero se debia a que la variable i que se enviaba a traves del evento perdia su valor de bucle. lo solucione usando una closure para poder enviar la variable.

gracias a tod@s