Question

I’m trying to code a progress bar…i’m using the youtube api to create custom controls for a player but that’s kind of irrelevant here. Basically I have this html for the progress bar:

<div id="progressbarOuter">
    <div id="progressBar"></div>
</div>

Progress bar outer has a width of 120px and the progress bar has a width of zero.

I’m setting an interval of 250ms and getting the current playback time from the youtube api. I also have the total duration. I’m then doing this calculation:

 var current = youtube.player.getCurrentTime();
 var totalDuration = youtube.player.getDuration();
 var m = (totalDuration / Math.round(current));
 var newWidth = (m * 120);

where 120 is the width of the progress bar. Problem is this gives me whacky numbers. If i alert out current and totalDuration the first alert I get gives me 1 for current and 126 for total duration…so doing the maths – 126 / 1 * 120 = 15,120. Then obviously the value in current only gets bigger so this number only increases. This obviously isn’t right.

Is anyone able to tell me where i’m going wrong? I think I’m along the right lines but something is going very wrong.

Answer 1

You want var m = (current / totalDuration);