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.

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.

• javascript
• css
• html
• video-player

• change e to event – ashishmaurya Commented May 27, 2014 at 8:50
• no difference. was there any particular reason for this? – Luke-T Commented May 27, 2014 at 8:52

1 Answer 1

your code is working change

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

http://jsfiddle/wqr7S/4/