Am developing chapters on the video. Based on the provided time (for example)

00:00 - Welcome

01:20 - Introduction

03:20 - The end

I have the html as like below:

<div class="overall-chapter-layer">
<div class="time-layer" width="0%">
<div class="progress-layer"></div>
</div>

Since 3 chapters provided. Now, the progress bars will be rendered based on the given time. In UI level, it will look like three Progress bars. (Just as like Youtube chapters)

Here, While video is playing need to update the progress. Since 3 chapters are provided, need to update the progress bar for each from 0 to 100%.

For the first progress bar am calculating the progress bar percentage as like below:

current_video_time / current_vid_duration * 100

Am missing the logic to calculate the progress bar percentage for remaining chapters. am trying like

(current_video_time - current_vid_duration[i-1])/(current_vid_duration[i] - current_vid_duration[i-1]) )*100;