SOURCE

/*
github:
视频地址：https://raw.githubusercontent.com/chenmonster/test/master/video/mv.mp4
图片地址：https://raw.githubusercontent.com/chenmonster/test/master/image/loading.gif
*/
window.onload = function() {
  var video = document.querySelector("video");
  var isPlay = document.querySelector(".switch");
  var expand = document.querySelector(".expand");
  var progress = document.querySelector(".progress");
  var loaded = document.querySelector(".progress > .loaded");
  var currPlayTime = document.querySelector(".timer > .current");
  var totalTime = document.querySelector(".timer > .total");

  //当视频可播放的时候
  video.oncanplay = function() {
    //显示视频
    this.style.display = "block";
    //显示视频总时长
    totalTime.innerHTML = getFormatTime(this.duration);
  };

  //播放按钮控制
  isPlay.onclick = function() {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
    this.classList.toggle("fa-pause");
  };

  //全屏
  expand.onclick = function() {
    video.webkitRequestFullScreen();
  };

  //播放进度
  video.ontimeupdate = function() {
    var currTime = this.currentTime,
    //当前播放时间
    duration = this.duration; // 视频总时长
    //百分比
    var pre = currTime / duration * 100 + "%";
    //显示进度条
    loaded.style.width = pre;

    //显示当前播放进度时间
    currPlayTime.innerHTML = getFormatTime(currTime);
  };

  //跳跃播放
  progress.onclick = function(e) {
    var event = e || window.event;
    video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
  };

  //播放完毕还原设置
  video.onended = function() {
    var that = this;
    //切换播放按钮状态
    isPlay.classList.remove("fa-pause");
    isPlay.classList.add("fa-play");
    //进度条为0
    loaded.style.width = 0;
    //还原当前播放时间
    currPlayTime.innerHTML = getFormatTime();
    //视频恢复到播放开始状态
    that.currentTime = 0;
  };

  function getFormatTime(time) {
    var time = time || 0;

    var h = parseInt(time / 3600),
    m = parseInt(time % 3600 / 60),
    s = parseInt(time % 60);
    h = h < 10 ? "0" + h: h;
    m = m < 10 ? "0" + m: m;
    s = s < 10 ? "0" + s: s;

    return h + ":" + m + ":" + s;
  }
}

<figure>
  <figcaption>
    视频播放器
  </figcaption>
  <div class="player">
    <video id="myVideo"  src="https://dn-coding-net-production-file.qbox.me/6f7255d0-6bca-11e8-b57a-f5b28d54c40f.mp4?download/mv.mp4&e=1528541386&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:e366KYb_BMRp_1aA2llqaOGhbKw=">
    </video>
    <div class="controls">
      <!-- 播放/暂停 -->
      <a href="javascript:;" class="switch fa fa-play">
      </a>
      <!-- 全屏 -->
      <a href="javascript:;" class="expand fa fa-expand">
      </a>
      <!-- 进度条 -->
      <div class="progress">
        <div class="loaded">
        </div>
        <div class="line">
        </div>
        <div class="bar">
        </div>
      </div>
      <!-- 时间 -->
      <div class="timer">
        <span class="current">
          00:00:00
        </span>
        /
        <span class="total">
          00:00:00
        </span>
      </div>
      <!-- 声音 -->
    </div>
  </div>
</figure>

body {
  padding: 0;
  margin: 0;
  font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
  background-color: #F7F7F7;
}

a {
  text-decoration: none;
}

figcaption {
  font-size: 24px;
  text-align: center;
  margin: 20px;
}

.player {
  width: 720px;
  height: 360px;
  margin: 0 auto;
  background: #000 url(https://dn-coding-net-production-file.qbox.me/62567840-6bca-11e8-b57a-f5b28d54c40f.gif?download/loading.gif&e=1528541673&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:UYIAWkjwP4ymt2hqJ5p8nqMCydY=) center/300px no-repeat;
  position: relative;
}

video {
  display: none;
  height: 100%;
  margin: 0 auto;
}

.controls {
  width: 720px;
  height: 40px;
  background-color: #2196F3;
  position: absolute;
  left: 0;
  bottom: -40px;
  z-index: 99;
  opacity: 0.7;
}

.player:hover .controls {
  opacity: 1;
}


/*播放/暂停*/

.controls .switch {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #FFF;
  position: absolute;
  top: 11px;
  left: 11px;
}

.controls .switch:hover {
  color: blue;
}


/*全屏按钮*/

.controls .expand {
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #FFF;
  position: absolute;
  right: 11px;
  top: 11px;
}

.controls .expand:hover {
  color: blue;
}


/*进度条*/

.progress {
  width: 430px;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #555;
  cursor: pointer;
  position: absolute;
  top: 16px;
  left: 45px;
}


/*下载进度*/

.progress .loaded {
  width: 0;
  height: 100%;
  background-color: blue;
}


/*播放进度*/

.progress .line {
  width: 0;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  top: 0;
  left: 0;
}


/**/

.progress .bar {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}


/*时间*/

.timer {
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 490px;
  top: 11px;
  color: #FFF;
  font-size: 14px;
}