HTML5 Video Player Progress Bar Update

Luke-T picture Luke-T · May 27, 2014 · Viewed 13.3k times · Source

I've been following thenewboston's HTML5 video tutorial and have reached the tutorials where we make the video player. I've copied the code exactly but the progress bar doesn't update when it is clicked.

My JSFiddle

I think the reason this isn't working is because of something wrong with:

function clickedBar(e){
    if(!myMovie.paused && !myMovie.ended){
        var mouseX=e.offsetX;
        var newtime=mouseX*myMovie.duration/barSize;
        myMovie.currentTime=newtime;
        progressBar.style.width=mouseX+'px';
    }
}

I really can't figure out why it's not working but any help will be appreciated!

EDIT: Fixed Link.

Answer

apsuva picture apsuva · May 27, 2014

your code is working change

 bar.addEventListener('click', **clickedbar**, false);
 bar.addEventListener('click', clickedBar, false);

http://jsfiddle.net/wqr7S/4/