Additional HTML5 Video Search Bar

Question

I deal with HTML5 video. I have a video working using the HTML5 vanilla tag <video>, something like this:

<video id="video" width="250" height="250" controls>
    <source src="video_src.mp4" type="video/mp4">
</video>

Things are good. What I'm looking for is a way to have an extra search bar at the bottom of the video. The arrow will be the image that represents the video. By clicking anywhere in the image, the video will move to that point.

Again, this will work in addition to the default execution bar, which comes with the default video functionality. The default and custom search bar must be synchronized, so when one is updated, the other moves as well.

Can someone point me in the right direction?

Thank!

Answer 1

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 Qaru console  */
.as-console-wrapper{ display: none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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>

Run codeHide result