Estoy desarrollando capítulos sobre el video. Basado en el tiempo proporcionado (por ejemplo)

00:00 - Bienvenida

01:20 - Introducción

03:20 - El final

Tengo el html como a continuación:

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

Desde 3 capítulos proporcionados. Ahora, las barras de progreso se representarán según el tiempo dado. En el nivel de la interfaz de usuario, se verá como tres barras de progreso. (Al igual que los capítulos de Youtube)

Aquí, mientras se reproduce el video, debe actualizar el progreso. Dado que se proporcionan 3 capítulos, debe actualizar la barra de progreso para cada uno de 0 a 100%.

Para la primera barra de progreso, estoy calculando el porcentaje de la barra de progreso de la siguiente manera:

 current_video_time / current_vid_duration * 100

Me falta la lógica para calcular el porcentaje de la barra de progreso para los capítulos restantes. estoy tratando como

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