HTML 5 Video Player.

http://bit.do/eezDA

HTML

<div id="container">
  <div id="video_container">
    <video id="vid">
               <source src="Dc.mp4" type="video/mp4">
               <source src="https://www.html5rocks.com/en/tutorials/track/basics/treeOfLife/video/developerStories-en.webm" type="video/webm">
               <!-- you can add flash fallback player here.
                  could be embed or object element. or just give message to update browser -->
            </video>
  </div>
  <div id='vidcontrols' class='vidcontrols'>
    <div id='progressbar' class='progressbar'>
      <span class="seekbar" id='seekbar'></span>
      <span class='loaded' id='loaded'></span>
      <div class='ball' id='ball'></div>
    </div>
    <div id='btmcontrols' class='btmcontrols'>
      <button id='playbtn' class='playbtn' title='Play'>
                  <svg style='fill:white;'>
                     <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" ></path>
                  </svg>
               </button>
      <p id='time' class='time'>00:00:00/00:00:00</p>
      <!--<div id='volume' class='volume'></div>-->
      <!--<div id='options' class='options'></div>-->
      <button id='fs' class='fs' title='Fullscreen'>
                  <svg style='fill:white;'>
                     <g>
                        <path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
                     </g>
                     <g>
                        <path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
                     </g>
                     <g>
                        <path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
                     </g>
                     <g >
                        <path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
                     </g>
                  </svg>
               </button>
    </div>
  </div>
</div>

CSS

#vid
/*Original post->http://bit.do/eezDA */

  {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto
}

#container {
  position: relative;
  min-width:500px;
  max-width:700px;
}

.vidcontrols {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 1px;
  background: rgba(0, 0, 0, 0.5);
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
  transform: translateX(-50%);
  transition: bottom .25s ease-in;
  height: 40px;
  width: 698px
}

.playbtn {
  position: absolute;
  border: 0;
  cursor: pointer;
  transition: opacity .175s ease-in;
  margin-left: 5px;
  display: block;
  height: 40px;
  width: 40px;
  background-color: transparent;
  overflow: visible;
  outline: none
}

.fs {
  display: block;
  background-color: transparent;
  border: 1px;
  height: 40px;
  width: 40px;
  position: absolute;
  float: right;
  right: 2px;
  margin-right: 10px;
  outline: none;
  overflow: visible
}

.time {
  position: absolute;
  height: 28px;
  width: auto;
  margin-left: 50px;
  margin-top: 10px !important;
  overflow: visible;
  font-size: 18px;
  color: #fff
}

.seekbar {
  position: relative;
  cursor: pointer;
  width: 0;
  height: 8px;
  display: block;
  max-width: 670px;
  background-color: rgba(225, 0, 0, 0.9);
  display: block
}

.progressbar {
  cursor: pointer;
  display: block;
  height: 8px;
  position: relative;
  max-width: 670px;
  background-color: rgba(225, 225, 225, 0.2);
  z-index: 10;
  width: 698px;
  margin-top: 0;
  margin-left: 10px
}

.loaded {
  margin-top: -8px;
  height: 8px;
  display: block;
  background-color: rgba(225, 225, 225, 0.4);
  max-width: 670px
}

.btmcontrols {
  max-width: 670px;
  width: 100%;
  height: 28px;
}

.vidcontrols {
  opacity: 0;
  transition: opacity .1s cubic-bezier(0.0, 0.0, 1, 1);
  position: absolute;
  min-width: 500px;
}

#container:hover .vidcontrols {
  opacity: 1
}

.ball {
  opacity: 1;
  width: 15px;
  height: 15px;
  margin-top: -11px;
  position: absolute;
 ...

JavaScript

var video = document.getElementById('vid');
    var seekbar = document.getElementById('seekbar');
    var playbtn = document.getElementById('playbtn');
    var ball = document.getElementById('ball');
    var progressbar = document.getElementById("progressbar");
    playbtn.onclick = function() {
      if (video.paused) {
        video.play();
        trackPlayProgress();
        playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path></svg>';
      } else {
        video.pause();
        stopTrackingPlayProgress();
        playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path></svg>';
      }
    }

    video.onloadeddata = function() {
      console.log("Browser has loaded the current frame");
      document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);

      video.addEventListener('progress', function() {
        var range = 0;
        var bf = this.buffered;
        var time = this.currentTime;

        while (!(bf.start(range) <= time && time <= bf.end(range))) {
          range += 1;
        }
        var loadStartPercentage = bf.start(range) / this.duration * 100;
        var loadEndPercentage = bf.end(range) / this.duration * 100;
        var loadPercentage = loadEndPercentage - loadStartPercentage;
        document.getElementById("loaded").style.width = loadPercentage + '%';
      });
    };

    function trackPlayProgress() {
      playProgressInterval = setInterval(updatePlayProgress, 50);
    }

    function stopTrackingPlayProgress() {
      clearInterval(playProgressInterval);
    }

    function updatePlayProgress() {
      document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
      widthvi = video.currentTime / video.duration * 100;
      //console.log(widthvi);

      seekbar.style.width = widthvi +...