Javascript 如何在html5视频播放器中添加搜索滑块？

我正在尝试创建一个自定义视频播放器，我已经设法添加了搜索栏现在我想添加一个搜索滑块到我的搜索栏（视频进度栏），意思是，我想要这样的东西

,

由于上面这张来自Netflix用户的图片可以将红色圆圈滑回并强制，我希望在我的自定义播放器中使用相同的图片

这是我到目前为止所拥有的

Jsfiddle：

HTML

Css

---

我需要做什么来实现我想要的

试试这样的东西

#自定义搜索栏范围。悬停：之后{
内容:'■';
显示：块；
位置：绝对位置；
背景色：红色；
颜色：红色；
排名：0；
右：0；
}

$（“#自定义seekbar”）.hover（函数（）{
$（this.find（“span”）.addClass（“hover”）；
}，函数（）{
$（this.find（“span”）.removeClass（“hover”）；
})
var sliderCanMove=false；
$（“#自定义seekbar”）。在（“mousedown”，function（）上{
sliderCanMove=true；
});
$（窗口）.on（“mousemove”，函数（e）{
如果（滑块移动）{
var offset=$（“#自定义seekbar”）.offset（）；
var left=（（e.clientX+offset.left））；
var totalWidth=$（“#自定义seekbar”）.width（）；
变量百分比=（左/总宽度）；
var vidTime=vid.duration*百分比；
vid.currentTime=vidTime；
}
});
$（window）.on（“mouseup”，function（）{
滑块移动=假；
});

---

更新的fiddle

我在内容中添加了该形状，因为它与您当前的进度条相匹配。您可以调整或使用任何其他符号，甚至图像。问题不是添加悬停按钮，而是能够前后滑动您添加的按钮，与Netflix中相同，在进度条的末尾添加一个符号。。。对于滑动，您可以直接在跨度上使用鼠标向上、鼠标向下和鼠标移动绑定。如果您能通过代码显示它，我将不胜感激，因为我不知道如何使按钮u添加的滑动随着当前时间向前和向后滑动

<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>

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()

#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;}