CODEWITHSUNDEEP
javascripthtmljquerycsshtml5-video
The Dead Man
The Dead Man

Reputation: 5556

How to add a seek slider to html5 video player?

I am trying to create a custom video player, I have managed to add a seek bar now I would like to add a seek slider to my seek bar (video progress bar), meaning, I want something like this.

enter image description here,

As the above image from Netflix user can slide the red circle back and force, I want the same in my custom player

Here is what I have so far.

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

what do I need to do to achieve what I want?

Upvotes: 0

Views: 7724

Answers (1)

anees
anees

Reputation: 1855

try something like that.

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

updated fiddle here.

Upvotes: 1

Related Questions