Como hacer un control de Video personalizado con HTML CSS y JS

ATENCIÓN: para esto se tiene que tener los iconos de icomoon app link 
 https://icomoon.io/app/#/select 
teniendo esto en cuenta también se necesitan dos imágenes esta:

Y esta :

bueno ya tienen esas dos imagenes echas solo pueden descargarlas de mi google drive o hacerlas ustedes mism@s :) continuamos

link del play en drive https://drive.google.com/file/d/0Bymdc4JBqOafTFJQMGRUdk5vNG8/view?usp=sharing
link del pause en drive https://drive.google.com/file/d/0Bymdc4JBqOafQ3VHUGxVVi0wTW8/view?usp=sharing
Comencemos
ATENCION: se necesita un video para poder correr el reproductor bien

Código HTML/HTML5 CON JS

<script type="text/javascript">
var video = document.getElementById("mivid");
function pancomp() {
if (video.requestFullscreen) {
video.requestFullscreen();
}
else {
video.webkitRequestFullscreen();
}
}
</script>

<video id="mivid">
    <source src="video1.mp4" type="">

    </source>
</video>
<div class="capa controles">
<img src="play.png" id="boton" onclick="repause();"></span>
    <div class="capa tiempo" onclick="buscar(event);">
        <div class="capa slider" id="slider">
         
        </div>
    </div>
</div>
<div class="btnfs" onclick="pancomp();">
<span class="icon-enlarge"></span>

<script type="text/javascript">
var video = document.getElementById("mivid");
var slider = document.getElementById("slider");
var boton = document.getElementById("boton");
var duracion ;
var t = setInterval(obDuracion, 500);
function obDuracion () {
if(video.readyState > 0) {
duracion = video.duration;
clearInterval(t);
}
}
function repause() {
if(video.paused) {
boton.src = "pause.png";
video.play();
var tmp = setInterval(posision, 25);
} else {
boton.src = "play.png";
video.pause();
clearInterval(tmp);
}
}
function posision() {
var tiempoMax = 500;
slider.style.left = (video.currentTime * tiempoMax)/duracion+"px";
}
function buscar (event) {
     var mx = event.clientX;
     var x = mx-65;
     slider.style.left = x+"px";
     video.currentTime = (x * duracion)/500;
}
</script>
</div>

Código CSS/CSS3

body{
font-family: arial;
}
.full{
background-color: #fefefe;
}
.full:-webkit-full-screen {
width: 100%;
height: 100%;
}
.capa{
position: absolute;
}
.capa.controles {
    background-color: #292929;
    width: 600px;
    height: 40px;
    border-radius: 11px;
    top: 360px;
    box-shadow: 3px 3px 3px rgba(64, 64, 64, 0.52);
}
.capa.tiempo {
background-color: #ce1010;
width: 500px;
height: 10px;
left: 50px;
top: 15px;
box-shadow: 3px 3px 3px rgba(64, 64, 64, 0.52);
}
.capa.slider {
background-color: #ce1010;
width: 16px;/*dejar los valores 15px para volver a la normalidad*/
    height: 22px;/*dejar los valores 25px para volver a la normalidad*/
top: -5px;
left: 0px;
box-shadow: 3px 3px 3px rgba(64, 64, 64, 0.52);
border-radius: 50px;/*Borrar este valor si se sale de largo*/
}
video{
width: 600px;
height: 400px;
background-color: #000;
box-shadow: 3px 3px 3px rgba(64, 64, 64, 0.52);
}
.btnfs{
background-color: transparent;
    height: 19px;
    width: 19px;
    left: 564px;
    top: 364px;
    /* margin-left: 680px; */
    font-size: 22px;
    /* margin-top: 360px; */
    color: #a2a2a2;
    position: absolute;
    -webkit-transition: all 900ms/*poner valor a 500ms si queres ponerlo como siempre*/ ease;
    -o-transition: all 900ms/*poner valor a 500ms si queres ponerlo como siempre*/ ease;
    transition: all 900ms/*poner valor a 500ms si queres ponerlo como siempre*/ ease;
    padding: 5px;
    }
    .btnfs:hover {
    color: white;
    transition: 900ms;
}

Y eso es todo tiene que quedarles así:

😄😄😄😄😄😄😄😄😄😄

Que quieres aprender coméntalo