Untitled

<html>
<head>
<style type="text/css">
video#vid {
    width: 640px;
    height: 480px;

}

video::-webkit-media-controls {
    display:none !important;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

div#playercontrolls {
    background: #333; /* set color later */
    padding: 10px;
}

div#playerContainer {

}

span#slider {
    margin-top: -6px;
}

.white-text {
    text-color: white;
}

input#seekslider {
    width: 90vh;
}

input#volumeslider {
    width: 20vh;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #000;
    border: #666 1px solid;
    height: 6px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height: 15px;
    width: 15px;
    border-radius: 75%;
    cursor:pointer;
}
input::-moz-range-track {
    -webkit-appearance: none !important;
    background: #000;
    border: #666 1px solid;
    height: 6px;
}

input::-moz-range-track::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height: 15px;
    width: 15px;
    border-radius: 75%;
    cursor:pointer;
}

input[type=range]:focus {
    outline: none;
}

input::-moz-range-track:focus {
    outline: none;
}


input#volumeslider {
    background: linear-gradient(to right, black , grey);
}

button.nokit {
    -webkit-appearance: none !important;
    background: none !important;
    color: inherit;
    border: none;
    padding: 0! important;
    font: inherit;
    cursor: pointer;
    outline: inherit !important;
    opacity:0.7;
}
button.nokit:hover{
    opacity:1;
}

::-webkit-media-controls {
  display:none !important;
}

::-webkit-media-controls-enclosure {
  display:none !important;
}
</style>
</head>
<body>
<div id="playerContainer" class="container z-depth-1">
    <div class="d-flex justify-content-center">
        <video id="vid" autoplay>
            <source src= "test.mp4" type="video/mp4"></source>
        </video>
    </div>
    <div id="playercontrolls">
        <button id="playpausebtn" class="nokit"><i class="fa fa-pause white-text" aria-hidden="true"></i></button>
        <span class="slider"><input id="seekslider" type="range" min="0" max="100" value="0" step="0.1">    </span>
        <span id="curtimetext" class="white-text"></span> / <span id="durtimetext" class="white-text"></span>
        <button id="mutebtn" class="nokit"><i class="fa fa-volume-up white-text" aria-hidden="true"></i></button>
        <span class="slider"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1"></span>
        <button id="fullscreenbtn" class="nokit"><i class="fa fa-desktop white-text" aria-hidden="true"></i> </button>
    </div>
</div>
<script>
var vid, playbtn, seekbar, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
var lastVolume;
var lastVolumeSlider;
var userIsUpdatingTime = false;

function initPlayer(){
    // setup object references
    vid = document.getElementById('vid');
    playbtn = document.getElementById('playpausebtn');
    seekbar = document.getElementById('seekslider');
    curtimetext = document.getElementById('curtimetext');
    durtimetext = document.getElementById('durtimetext');
    mutebtn = document.getElementById('mutebtn');
    volumeslider = document.getElementById('volumeslider');
    fullscreenbtn = document.getElementById('fullscreenbtn');

    // setup event listeners
    playbtn.addEventListener("click", playPause, false);
    vid.addEventListener("timeupdate", seekTimeUpdate,false);
    seekbar.addEventListener("input",
    function () {
        userIsUpdatingTime = true;
    }
    ,false);
    seekbar.addEventListener("change", vidSeek, false);
    mutebtn.addEventListener("click", vidmute, false);
    volumeslider.addEventListener("change", setvolume, false);
    fullscreenbtn.addEventListener("click", togglefullscreen, false);

    vid.controls = false;
    updateTime();
}

window.onload = initPlayer;

function playPause(){
    if(vid.paused){
        vid.play();
        playbtn.innerHTML = "<i class=\"fa fa-pause white-text\" aria-hidden=\"true\"></i>";
    } else {
        vid.pause();
        playbtn.innerHTML = "<i class=\"fa fa-play white-text\" aria-hidden=\"true\"></i>";
    }
}

function vidSeek(){
    var seekto = vid.duration * (seekbar.value / 100);
    vid.currentTime = seekto;
    userIsUpdatingTime = false;
}

function seekTimeUpdate(){
    if (userIsUpdatingTime)
        return;

    var nt = vid.currentTime * (100 / vid.duration);
    seekbar.value = nt;

    // update time text
    updateTime();
}

function updateTime(){
    var curmins = Math.floor(vid.currentTime / 60);
    var cursecs = Math.round(vid.currentTime - curmins * 60);
    var durmins = Math.floor(vid.duration / 60);
    var dursecs = Math.round(vid.duration - durmins * 60);

    if(cursecs < 10){ cursecs = "0"+cursecs;}
    if(dursecs < 10){ dursecs = "0"+dursecs;}
    if(durmins > 10)
        if(curmins < 10){ curmins = "0"+curmins;}

    curtimetext.innerHTML = curmins+":"+cursecs;
    durtimetext.innerHTML = durmins+":"+dursecs;

    if(vid.currentTime == vid.duration){
        seekbar.value = 0;
        vid.currentTime = 0;
        vid.pause();
        playbtn.innerHTML = "<i class=\"fa fa-pause white-text\" aria-hidden=\"true\"></i>";
        }

}

function vidmute(){
    if(vid.muted){
        vid.volume = lastVolume;
        volumeslider.value = lastVolumeSlider
        vid.muted = false;
        mutebtn.innerHTML = "<i class=\"fa fa-volume-up white-text\" aria-hidden=\"true\"></i>";
    } else {
        lastVolume = vid.volume;
        vid.volume = 0;
        lastVolumeSlider = volumeslider.value;
        volumeslider.value = 0;
        vid.muted = true;
        mutebtn.innerHTML = "<i class=\"fa fa-volume-off white-text\" aria-hidden=\"true\"></i>";
    }
}

function setvolume(){
    if(vid.muted && volumeslider.value != 0){
        vid.muted = false;
        mutebtn.innerHTML = "<i class=\"fa fa-volume-up white-text\" aria-hidden=\"true\"></i>";
    }
    vid.volume = volumeslider.value / 100;
}

function togglefullscreen(){
    if(vid.requestFullScreen){
        vid.requestFullScreen();
    } else if(vid.webkitRequestFullScreen){
        vid.webkitRequestFullScreen();
    } else if(vid.mozRequestFullScreen){
        vid.mozRequestFullScreen();
    }
}
</script>
</body>
</html>