Foros del Web » Programando para Internet » Javascript »

barra de tiempo javascript¿?

Estas en el tema de barra de tiempo javascript¿? en el foro de Javascript en Foros del Web. Para mi proyecto de fin de curso estoy haciendo una web que usa el api de youtube para reproducir canciones con un reproductor propio creado ...
  #1 (permalink)  
Antiguo 03/06/2011, 15:27
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
barra de tiempo javascript¿?

Para mi proyecto de fin de curso estoy haciendo una web que usa el api de youtube para reproducir canciones con un reproductor propio creado en javascript y necesito saber como hacer la tipica linea de tiempo, que al pulsar en un punto me devuelva un valor para poder pasar la canción a ese segundo y usaría la misma para el control del audio. ¿Alguien tiene idea de como hacer esto?

Gracias!!
  #2 (permalink)  
Antiguo 04/06/2011, 01:11
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: barra de tiempo javascript¿?

Código Javascript:
Ver original
  1. function reproductor(){
  2.     this.tiempo = "01:15",
  3.     this.barra = document.getElementById("barra")
  4.     this.ir = function(event){ this.segundoActual = (this.segundos / barra.style.width.replace("px","")) * event.offsetX; this.pausado = false; document.getElementById("pausar").innerHTML = "Pausar"  }
  5.     this.navegacion = document.getElementById("navegacion")
  6.     this.time = document.getElementById("time")
  7.     this.segundos =  Number(this.tiempo.split(":")[0] * 60) + Number(this.tiempo.split(":")[1])
  8.     this.pasos = barra.style.width.replace("px","") / this.segundos
  9.     this.segundoActual = 0;
  10.     this.pausado = false;
  11.     this.animacion = setInterval(function(){
  12.         if(!reproductor.pausado){
  13.         reproductor.navegacion.style.left = (Math.round((reproductor.pasos ) * reproductor.segundoActual)) + "px";
  14.         reproductor.segundoActual += 0.03125;
  15.         reproductor.final = reproductor.barra.style.width.replace("px","") - reproductor.navegacion.style.width.replace("px","");
  16.         reproductor._minutos = Math.floor(Math.round(reproductor.segundoActual)/60)
  17.         reproductor._segundos =  Math.round(reproductor.segundoActual) - (reproductor._minutos*60)
  18.         if(String(reproductor._minutos).length < 2){
  19.             reproductor._minutos = String("0") + String(reproductor._minutos)          
  20.         }
  21.         if(String(reproductor._segundos).length < 2){
  22.             reproductor._segundos = String("0")+ String(reproductor._segundos)         
  23.         }
  24.         reproductor.time.innerHTML = reproductor._minutos + ":" + reproductor._segundos
  25.         if(reproductor.segundoActual >= reproductor.segundos || reproductor.navegacion.style.left.replace("px","") > reproductor.final ){
  26.                
  27.             reproductor.navegacion.style.left = reproductor.final  + "px"
  28.             reproductor.time.innerHTML = reproductor.tiempo;
  29.             reproductor.pausado = true;
  30.             document.getElementById("pausar").innerHTML = "Pausar"
  31.         }      
  32.         }
  33.        
  34.     }, 31.25)
  35. }
  36.  
  37. var reproductor = new reproductor()

Que suerte tiene de que yo sea un desocupado.

Version en jsfiddle

Lo mas increible es que funciona hasta en Internet Explorer 6, lol
  #3 (permalink)  
Antiguo 05/06/2011, 14:25
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: barra de tiempo javascript¿?

Una version mucho mas optimizada del mismo codigo, ahora se crean dinamicamente las barras de tiempo y se le pueden pasar funciones como parametros

Código Javascript:
Ver original
  1. var reproductor1 =  new reproductor("01:15", // Primer paramatro es el tiempo
  2.                     "container", // segundo parametro es el ID del contenedor
  3.                     false, // Tercer parametro es si inicia Pausado o no
  4.                     function(){alert(this.segundoActual)}, // Función al clickear la barra
  5.                     function(){alert(this.pausado)} // Funcion al pausar
  6. )

Verlo en JSfiddle

Necesita tener declado el ancho de .barra y .navegacion en el CSS para funcionar optimamente.
  #4 (permalink)  
Antiguo 05/06/2011, 15:30
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: barra de tiempo javascript¿?

me has salvado la vida, muchísimas gracias! la verdad esque el primero no lo entendía muy bien, pero me viene de lujo! :D:D
  #5 (permalink)  
Antiguo 05/06/2011, 15:35
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: barra de tiempo javascript¿?

Esa versión que acabe de postear tiene problemas en Internet Explorer; mejor use esta versión:

http://jsfiddle.net/shAEV/6/
  #6 (permalink)  
Antiguo 07/06/2011, 05:18
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: barra de tiempo javascript¿?

Cita:
Iniciado por InKarC Ver Mensaje
Esa versión que acabe de postear tiene problemas en Internet Explorer; mejor use esta versión:

[url]http://jsfiddle.net/shAEV/6/[/url]

Ahora el problema está en Firefox :S sabes a que puede deberse¿? Muchas gracias!
  #7 (permalink)  
Antiguo 07/06/2011, 12:09
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antigüedad: 18 años, 4 meses
Puntos: 87
Respuesta: barra de tiempo javascript¿?

Si... el problema esta en que los genios de Mozilla no están usando el la propiedad estandar event.offsetX si no que se inventaron una llamada event.layerX que es exactamente lo mismo.

Aqui esta ya compatible con mozilla:

http://jsfiddle.net/shAEV/9/

------------------------------------------------

Por cierto, para solucionar este problema en un script existente la mejor solucion es esta (dentro de la funcion que utiliza event claro esta):
Código Javascript:
Ver original
  1. if(!event.offsetX){event.offsetX = event.layerX};
  #8 (permalink)  
Antiguo 09/06/2011, 03:18
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: barra de tiempo javascript¿?

Cita:
Iniciado por InKarC Ver Mensaje
Si... el problema esta en que los genios de Mozilla no están usando el la propiedad estandar event.offsetX si no que se inventaron una llamada event.layerX que es exactamente lo mismo.

Aqui esta ya compatible con mozilla:

[url]http://jsfiddle.net/shAEV/9/[/url]

------------------------------------------------

Por cierto, para solucionar este problema en un script existente la mejor solucion es esta (dentro de la funcion que utiliza event claro esta):
Código Javascript:
Ver original
  1. if(!event.offsetX){event.offsetX = event.layerX};
Genial! eres un crack :D muchísimas gracias !! :D
  #9 (permalink)  
Antiguo 09/06/2011, 03:24
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
Respuesta: barra de tiempo javascript¿?

Cita:
Iniciado por InKarC Ver Mensaje
Si... el problema esta en que los genios de Mozilla no están usando el la propiedad estandar event.offsetX si no que se inventaron una llamada event.layerX que es exactamente lo mismo.

Aqui esta ya compatible con mozilla:

[url]http://jsfiddle.net/shAEV/9/[/url]

------------------------------------------------

Por cierto, para solucionar este problema en un script existente la mejor solucion es esta (dentro de la funcion que utiliza event claro esta):
Código Javascript:
Ver original
  1. if(!event.offsetX){event.offsetX = event.layerX};
Genial! eres un crack :D muchísimas gracias !! :D

Etiquetas: barra
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 02:59.