I think you want to do some sort of time control of your video.

Considering that your code is incomplete and so the video tag should be put.

The video tag already comes standard with some basic controls, being your choice to disable them or not.

To disable these default browser controls is used: video.controls = false;

Then I added some functions to manipulate this time of the video, so that when passing the video can be changed in the input and so that having a change in the input can change the time of the video.

The video element has an event called timeupdate that fires when the time in currentTime of the video is changed, which in turn is the property that allows you to change or display the current time of the video, element video also has the duration property that shows in seconds the total time of the video.

var video = document.querySelector('.video'),
    range = document.querySelector('.range');

video.controls = false;

range.addEventListener('mousedown', function (event) {
  video.pause();
});

range.addEventListener('change', function (event) {
  video.currentTime = range.value / range.max * video.duration;
  video.play();
});

video.addEventListener('timeupdate', function (event) {
  var position = this.currentTime / this.duration;
  range.value = position * 1000;
});

.range {
  width: 400px;
}

<video class="video" width="400" src="http://www.w3schools.com/html/mov_bbb.mp4"type="video/mp4" autoplay>
  Your browser does not support HTML5 video.
</video>

<input class="range" type="range" value="0" max="1000">

Now it's up to you!

How about adding some more controls like pause and start ...

Vale takes a look at: link
link link

Styling input[range]

input[type=range] {
  -webkit-appearance: none; /* remove estilo padrão do browser */
}

/* estiliza o marcador móvel */

/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* remove estilo padrão do browser */
  background: red;
  height: 15px;
  width: 10px;
}

/* Firefox */
input[type=range]::-moz-range-thumb {
  background: red;
  height: 15px;
  width: 10px;
}

/* IE */
input[type=range]::-ms-thumb {
  background: red;
  height: 15px;
  width: 10px;
}

/* estiliza a a barra do slider */

/* Chrome/Safari/Opera */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: blue;
}

/* Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: blue;
}

/* IE */
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  background: blue;
}

link