Hello I was following a tutorial but the progress bar does not appear, these are the worksheets, in the "clicking" function where I put "loop = setInterval (state, 1000);" is where you should show the video progress bar but nothing happens.
RESOLVED, missing a "=" in the line function state () { if ( mivideo.ended = false ) ....
HTML
<!DOCTYPE html>
<html>
<head>
<title>Eventos en html5 con js</title>
<link rel="stylesheet" type="text/css" href="18aspecto_videos.css">
<script src="18funcionalidad_barra.js"></script>
</head>
<body>
<!--MANERA MAS OPTIMA PARA PONER LOS VIDEOS-->
<section id="video">
<video id="mivideo" width="720" loop>
<source src="videos/17video-2012-04-05-14-22-32.mp4">
<source src="videos/17video-2012-04-05-14-22-32.ogg">
</video>
<nav> <!--especifican barras de navegacion y controloes de navegacion para un video-->
<div id="botones">
<button type="button" id="reproducir">play</button>
</div>
<div id ="barra">
<div id="progreso">
</div>
</div>
</nav>
</section>
</body>
</html>
CSS
#video{
width: 720px;
margin: :20px auto;
background: #FC3;
padding: 5px;
border: 2px solid #F60;
-moz- border-radius: 8px; /* para mejorar la compatiblidad*/
-webkit- border-radius: 8px;
border-radius: 8px;
}
nav{
margin: 5px 0;
}
#botones{
float:left;
width: 100px;
height: 20px;
}
#barra{
background: #FFF;
width: 600px;
height: 16px;
border:1px solid #666;
padding: 3px;
margin-left: 80px;
}
#progreso{
position: absolute; /*lo dejara a la izq de donde se encuentra ahora*/
width: 0px;
height: 16px;
background: rgba(0,0,150,2);
}
JS
var mivideo, reproducir, barra, progreso,maximo;
maximo = 600; /*definí que la barra de carga tendria un ancho de 600 px por eso digo que max es de 600*/
function comenzar(){
mivideo=document.getElementById("mivideo"); /*hago referencia desde js a las vriables y que sepa que nos referimos a los elementos del codigo html (las que estan entre '')*/
reproducir=document.getElementById("reproducir");
barra=document.getElementById("barra");
progreso=document.getElementById("progreso");
reproducir.addEventListener("click",clicando,false);
progreso.addEventListener("click",adelantando,false);
}
function clicando(){
if((mivideo.paused==false) && (mivideo.ended==false)){ /*si esta reproduciendo*/
mivideo.pause();
reproducir.innerHTML="Play"; /*cambia el texto del boton cuando este pausado*/
}
else{ /*si esta pausado o esta finalizado*/
mivideo.play();
reproducir.innerHTML="Pause"; /*cambia el texto del boton cuando este reproduciendo*/
bucle = setInterval(estado, 1000);
}
}
function adelantando(){
}
function estado(){
if(mivideo.ended=false)
{
var total = parseInt(mivideo.currentTime*maximo/mivideo.duration);
progreso.style.width =total+"px";
}
}
window.addEventListener("load",comenzar,false);