html
Código 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>
y el de javascript es
Código 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);
El problema es que no funciona y no carga nada , pero si pego el codigo de la pagina del libro si funciona , el cual es el siguiente
Código Javascript :
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);
No encuentro diferencia solo lo de ingles y español , no entiendo porque el mio no funciona y el js del codigo de la pagina del libro si , espero me puedan ayudar y resolver esta duda
