javascript - HTML5 Video Player Progress Bar Update - Stack Overflow

admin管理员组

文章数量:1316339

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

Share Improve this question Follow asked May 27, 2014 at 8:48 Luke-TLuke-T 4511 gold badge11 silver badge77 bronze badges 2

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

your code is working change

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

http://jsfiddle/wqr7S/4/

本文标签： javascriptHTML5 Video Player Progress Bar UpdateStack Overflow