Как добавить ползунок поиска в html5 видеоплеер?

Question

Я пытаюсь создать пользовательский видеоплеер, мне удалось добавить панель поиска, теперь я хотел бы добавить ползунок поиска на панель поиска (индикатор выполнения видео), то есть я хочу что-то вроде этого.

,

Поскольку приведенное выше изображение от пользователя Netflix может сдвинуть красный круг назад и принудительно, я хочу то же самое в моем пользовательском плеере

Вот что у меня есть.

Jsfiddle: демо

HTML

<div id="custom-seekbar">
  <span></span>
</div>
<video id="video" width="400" controls autoplay>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Js

var vid = document.getElementById("video");
vid.ontimeupdate = function(){
  var percentage = ( vid.currentTime / vid.duration ) * 100;
  $("#custom-seekbar span").css("width", percentage+"%");
};

$("#custom-seekbar").on("click", function(e){
    var offset = $(this).offset();
    var left = (e.pageX - offset.left);
    var totalWidth = $("#custom-seekbar").width();
    var percentage = ( left / totalWidth );
    var vidTime = vid.duration * percentage;
    vid.currentTime = vidTime;
});//click()

Css

#custom-seekbar
{  
  cursor: pointer;
  height: 10px;
  margin-bottom: 10px;
  outline: thin solid orange;
  overflow: hidden;
  position: relative;
  width: 400px;
}
#custom-seekbar span
{
  background-color: orange;
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0px;
}

/* following rule is for hiding Stack Overflow's console  */
.as-console-wrapper{ display: none !important;}

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

Answer 1

попробуйте что-нибудь подобное.

#custom-seekbar span.hover:after{
  content: '■';
  display:block;
  position: absolute;
  background-color: red;
  color: red;
  top: 0;
  right: 0;
}

$("#custom-seekbar").hover(function(){
    $(this).find("span").addClass("hover");
}, function(){
    $(this).find("span").removeClass("hover");
})

var sliderCanMove = false;

$("#custom-seekbar").on("mousedown", function(){
    sliderCanMove = true;

});

$(window).on("mousemove", function(e){
    if(sliderCanMove){
        var offset = $("#custom-seekbar").offset();
            var left = ((e.clientX + offset.left));
            var totalWidth = $("#custom-seekbar").width();
            var percentage = ( left / totalWidth );
            var vidTime = vid.duration * percentage;
            vid.currentTime = vidTime;
    }
});

$(window).on("mouseup", function(){
    sliderCanMove = false;
});

обновленная скрипка здесь.