如何向 html5 视频播放器添加搜索滑块？

Question

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

,

由于 Netflix 用户的上图可以向后滑动红色圆圈并用力，我希望在我的自定义播放器中使用相同的功能

这是我目前的情况。

Jsfiddle : demo

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

已更新 fiddle here.

如何向 html5 视频播放器添加搜索滑块？

How to add a seek slider to html5 video player?

html

javascript

css

jquery

html5-video