how to code a progress bar

tags:

javascript

views:

109

answers:

+4 Q:

how to code a progress bar

Hi,

I'm building a youtube player with custom controls using the youtube api:

http://code.google.com/apis/youtube/youtube_player_demo.html?playerType=chromeless&playerVersion=as3

I've got the play/pause/skip buttons all done but I've got to create a progress bar and I can't think how to do it. I've never programmed a progress bar before. I can access the total video time and also poll the current play time using setinterval...so every 250ms for example I can poll to find out the videos current position.

My question is how do I make use of that data to create a progress bar? I'm thinking of a div that I could manipulate in width to show video progress. My problem is how do i make use of the data (total video duration and current time) to decide when and how much to increase the width of this div.

Hope this makes sense.

+1 A:

Take a look on this, may be help u.

piemesons 2010-09-06 13:17:55

+1 A:

Check this

org.life.java 2010-09-06 13:24:00

+1 A:

The formula to calculate the size of your progress-bar is very basic: $download_size / $download_progress * $max_progressbar_width. You just need to make sure that both download sizes use the same units to get a correct proportion.

Reinis I. 2010-09-06 13:25:09

So that would be total_video_duration / current_time * the_width_of_progress_bar? ----and just make sure that i'm only dealing with numbers in the calculations.

elduderino 2010-09-06 13:33:42

This was the answer

elduderino 2010-09-09 16:25:29

+1 A:

Try this:

http://stackoverflow.com/questions/3454034/javascript-progress-animation/3454173#3454173

Jeff V 2010-09-06 13:27:23

Yeah, The source code provides the answer: var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth(); ---but I don't fully understand what's going on! elements.elapsed.width(ratio*100+'%'); elements.player.seekTo(Math.round(data.duration*ratio), true);

elduderino 2010-09-06 13:30:34

The examples above look pretty good. However the progress bar is a little more manual. My example was a jQuery Plugin that does progress bar. If you know that the beginning is 0 and the end is "x" seconds. You could easily pass in a seconds value that increases the "progress" of the bar. The plugin does it automatically.

Jeff V 2010-09-06 13:41:53

ansaurus

tags:

views:

answers:

how to code a progress bar

related questions