how to code a progress bar

Question

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.

Answer 1

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.