Как добавить маркеры в видеоплеере html5 на индикаторе прогресса видео? ⇐ Jquery

[Anonymous]

У меня есть простой собственный видеоплеер HTML 5, я хотел бы добавить маркеры в свой видеоплеер, примерно такую ​​шкалу прогресса.




Пока вот мое решение только для одного маркера при 0,6 с.

HTML

Код: Выделить всё

[img]images/play.png[/img]
[img]images/pause.png[/img]

Вот js для добавления маркеров

Код: Выделить всё

$(document).ready(function(){

//get videoplayer tag element
var videoplayerID =document.getElementById("videoplayer");
var ranges = [{
from: 0,
to: 6
},
{
from: 6,
to: 9
},
{
from: 9,
to: 25
},
{
from: 25,
to: 38
},
];

console.log(ranges[0].to);

videoplayerID.addEventListener("timeupdate", function () {
if ($(this)[0].duration) {
$(this).parent().parent().find("#current-time").css("width", ($(this)[0].currentTime * 100 / $(this)[0].duration) + "%");
}

if (this.currentTime >= ranges[0].to) {

var bb =$('')

$("#current-time").append(bb);

}
});

})

Теперь, когда я запускаю свое приложение, я получаю следующее.




Что мне нужно сделать, чтобы получить то, что я хочу?

Подробнее здесь: https://stackoverflow.com/questions/583 ... cation-bar