Entrar

Duda con reproductor en javascript

njl27 · · Solicitar retirada
Hola amigos , compre un libro de html5 , el cual trae un apartado de como hacer un reproductor de musica o video en javascript.
Mi codigo es el siguiente:
html

<!DOCTYPE html>
<html lang="es">
<head>
<title> Reproductor de video </title>
<link rel="stylesheet" href="reproductor.css" >
<script src="reproductor.js"></script>

</head>
<body>
<section id="reproductor">
	<audio id="medio">
		<source src="http://minkbooks.com/content/beach.mp4">
		<source src="http://minkbooks.com/content/beach.ogg">
		
	</audio>
	<nav>	
		<div id="botones">
			<button type="button" id="reproducir"> Reproducir </button>
		</div>
		<div id="barra">
			<div id="progreso"></div>
		</div>
	<div style="clear: both"></div>
</nav>
</section>
</body>
</html>

javascript

function iniciar() {
	
	maximo=600;
	 medio=document.getElementById('medio');
	
	
	reproducir=document.getElementById('reproducir');
 	 barra=document.getElementById('barra');
  	progreso=document.getElementById('progreso');
 
 	reproducir.addEventListener('click', presionar, false);
  	barra.addEventListener('click', mover, false);
	
	
	
}
}


function presionar() {

	
	if(!medio.paused && !medio.ended) {
    medio.pause();
    reproducir.innerHTML='Play';
    window.clearInterval(bucle);
  }else{
    medio.play();
    reproducir.innerHTML='Pause';
    bucle=setInterval(estado, 1000);
  }
}
	
	
function estado {
		
if(!medio.ended){
    var total=parseInt(medio.currentTime*maximo/medio.duration);
    progreso.style.width=total+'px';
  }else{
    progreso.style.width='0px';
    reproducir.innerHTML='Play';
    window.clearInterval(bucle);
  }
}
function mover(e) {
			 if(!medio.paused && !medio.ended){
    var ratonX=e.pageX-barra.offsetLeft;
    var nuevoTiempo=ratonX*medio.duration/maximo;
    medio.currentTime=nuevoTiempo;
    progreso.style.width=ratonX+'px';
  }
}

window.addEventListener('load', iniciar, false);

Y no me funciona , pero si uso el codigo que esta en la pagina web del libro si funciona , he intentado notar la diferencia o el error y no encuentro nada , a ecepcion del lenguaje ingles , dejo el codigo de la pagina web del libro

function initiate() {

  maxim=600;
  mmedia=document.getElementById('medio');
  play=document.getElementById('play');
  bar=document.getElementById('barra');
  progress=document.getElementById('progreso');
 
  play.addEventListener('click', push, false);
  bar.addEventListener('click', move, false);
}
function push(){
  if(!mmedia.paused && !mmedia.ended) {
    mmedia.pause();
    play.innerHTML='Play';
    window.clearInterval(loop);
  }else{
    mmedia.play();
    play.innerHTML='Pause';
    loop=setInterval(status, 1000);
  }
}
function status(){
  if(!mmedia.ended){
    var size=parseInt(mmedia.currentTime*maxim/mmedia.duration);
    progress.style.width=size+'px';
  }else{
    progress.style.width='0px';
    play.innerHTML='Play';
    window.clearInterval(loop);
  }
}

function move(e){
  if(!mmedia.paused && !mmedia.ended){
    var mouseX=e.pageX-bar.offsetLeft;
    var newtime=mouseX*mmedia.duration/maxim;
    mmedia.currentTime=newtime;
    progress.style.width=mouseX+'px';
  }
}

window.addEventListener('load', initiate, false);

Espero puedan ayudarme a encontrar la falla de mi codigo
njl27 · · Solicitar retirada
les dejo tambien el codigo del css

body{
  text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
  display : block;
}
#reproductor{
  width: 720px;
  margin: 20px auto;
  padding: 5px;
  background: #999999;
  border: 1px solid #666666;
    
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
nav{
  margin: 5px 0px;
}
#botones{
  float: left;
  width: 85px;
  height: 20px;
}
#barra{
  position: relative;
  float: left;
  width: 600px;
  height: 16px;
  padding: 2px;
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
}
#progreso{
  position: absolute;
  width: 0px;
  height: 16px;
  background: rgba(0,0,150,.2);
}