Estoy tratando de implementar una función que muestre/oculte marcadores (podrían ser subtítulos, área resaltada) según el evento "timeUpdate" que rastrea la hora actual.

Mi fuente de contenido tiene varias pistas. Según la hora actual, se pueden mostrar u ocultar una o más pistas que contengan objetos de marcador.

Aquí está el código de inicio. Solo trato de implementar un algoritmo eficiente que pueda ser escalable en caso de que aumente el número de pistas. Necesito sugerencias sobre mejoras

 player.on('timeUpdate', function(event) { // currentTime (seconds, float) is exposed as event.data.currentTime var currentTime = event.data.currentTime; var time = convertTimeStamp(currentTime); // your algorithm will be called here with the currentTime as the argument handleAnnotations(time); }); function handleAnnotations(currentTime) { for (var i = 0; i < tracks.length; i++) { for (var j = 0; j < tracks[i].length; j++) { var currentAnnotationStartTime = convertTimeStamp(tracks[i][j].startTime); var currentAnnotationEndTime = convertTimeStamp(tracks[i][j].endTime); if (currentTime >= currentAnnotationStartTime && currentTime < currentAnnotationEndTime) { tracks[i][j].show; } else { tracks[i][j].hide; } } } } function convertTimeStamp(time) { var hours = Math.floor(time / 60 / 60); var minutes = Math.floor(time / 60); var seconds = Math.floor(time - minutes * 60); var hourValue = hours.toString().padStart(2, '0'); var minuteValue = minutes.toString().padStart(2, '0'); var secondValue = seconds.toString().padStart(2, '0'); var mediaTime = `${hourValue}:${minuteValue}:${secondValue}`; return mediaTime; }

Las pistas se configuran así:

 tracks = [ [annotation1, annotation2, annotationN...], [annotation1, annotation2, annotationN...], ... ]

Donde cada annotation se parece a:

 { "startTime": timestamp, "endTime": timestamp, "show": fn, "hide": fn }