SOURCE

$(function() {
  var playVideo = $('video');
  var playPause = $('.playPause'); //播放和暂停
  var currentTime = $('.timebar .currentTime'); //当前时间
  var duration = $('.timebar .duration'); //总时间
  var progress = $('.timebar .progress-bar'); //进度条
  var volumebar = $('.volumeBar .volumewrap').find('.progress-bar');
  playVideo[0].volume = 0.4; //初始化音量
  playPause.on('click', function() {
    playControl();
  });
  $('.playContent').on('click', function() {
    playControl();
  }).hover(function() {
    $('.turnoff').stop().animate({
      'right': 0
    },
    500);
  },
  function() {
    $('.turnoff').stop().animate({
      'right': -40
    },
    500);
  });
  $(document).click(function() {
    $('.volumeBar').hide();
  });
  playVideo.on('loadedmetadata', function() {
    duration.text(formatSeconds(playVideo[0].duration));
  });

  playVideo.on('timeupdate', function() {
    currentTime.text(formatSeconds(playVideo[0].currentTime));
    progress.css('width', 100 * playVideo[0].currentTime / playVideo[0].duration + '%');
  });
  playVideo.on('ended', function() {
    $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
    playPause.toggleClass('playIcon');
  });

  $(window).keyup(function(event) {
    event = event || window.event;
    if (event.keyCode == 32) playControl();
    if (event.keyCode == 27) {
      $('.fullScreen').removeClass('cancleScreen');
      $('#willesPlay .playControll').css({
        'bottom': -48
      }).removeClass('fullControll');
    };
    event.preventDefault();
  });

  //全屏
  $('.fullScreen').on('click', function() {
    if ($(this).hasClass('cancleScreen')) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozExitFullScreen) {
        document.mozExitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      $(this).removeClass('cancleScreen');
      $('#willesPlay .playControll').css({
        'bottom': -48
      }).removeClass('fullControll');
    } else {
      if (playVideo[0].requestFullscreen) {
        playVideo[0].requestFullscreen();
      } else if (playVideo[0].mozRequestFullScreen) {
        playVideo[0].mozRequestFullScreen();
      } else if (playVideo[0].webkitRequestFullscreen) {
        playVideo[0].webkitRequestFullscreen();
      } else if (playVideo[0].msRequestFullscreen) {
        playVideo[0].msRequestFullscreen();
      }
      $(this).addClass('cancleScreen');
      $('#willesPlay .playControll').css({
        'left': 0,
        'bottom': 0
      }).addClass('fullControll');
    }
    return false;
  });
  //音量
  $('.volume').on('click', function(e) {
    e = e || window.event;
    $('.volumeBar').toggle();
    e.stopPropagation();
  });
  $('.volumeBar').on('click mousewheel DOMMouseScroll', function(e) {
    e = e || window.event;
    volumeControl(e);
    e.stopPropagation();
    return false;
  });
  $('.timebar .progress').mousedown(function(e) {
    e = e || window.event;
    updatebar(e.pageX);
  });
  //$('.playContent').on('mousewheel DOMMouseScroll',function(e){
  //	volumeControl(e);
  //});
  var updatebar = function(x) {
    var maxduration = playVideo[0].duration; //Video 
    var positions = x - progress.offset().left; //Click pos
    var percentage = 100 * positions / $('.timebar .progress').width();
    //Check within range
    if (percentage > 100) {
      percentage = 100;
    }
    if (percentage < 0) {
      percentage = 0;
    }

    //Update progress bar and video currenttime
    progress.css('width', percentage + '%');
    playVideo[0].currentTime = maxduration * percentage / 100;
  };
  //音量控制
  function volumeControl(e) {
    e = e || window.event;
    var eventype = e.type;
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
    var positions = 0;
    var percentage = 0;
    if (eventype == "click") {
      positions = volumebar.offset().top - e.pageY;
      percentage = 100 * (positions + volumebar.height()) / $('.volumeBar .volumewrap').height();
    } else if (eventype == "mousewheel" || eventype == "DOMMouseScroll") {
      percentage = 100 * (volumebar.height() + delta) / $('.volumeBar .volumewrap').height();
    }
    if (percentage < 0) {
      percentage = 0;
      $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-off');
    }
    if (percentage > 50) {
      $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-up');
    }
    if (percentage > 0 && percentage <= 50) {
      $('.otherControl .volume').attr('class', 'volume glyphicon glyphicon-volume-down');
    }
    if (percentage >= 100) {
      percentage = 100;
    }
    $('.volumewrap .progress-bar').css('height', percentage + '%');
    playVideo[0].volume = percentage / 100;
    e.stopPropagation();
    e.preventDefault();
  }

  function playControl() {
    playPause.toggleClass('playIcon');
    if (playVideo[0].paused) {
      playVideo[0].play();
      $('.playTip').removeClass('glyphicon-play').addClass('glyphicon-pause').fadeOut();
    } else {
      playVideo[0].pause();
      $('.playTip').removeClass('glyphicon-pause').addClass('glyphicon-play').fadeIn();
    }
  }
  //关灯
  $('.btnLight').click(function(e) {
    e = e || window.event;
    if ($(this).hasClass('on')) {
      $(this).removeClass('on');
      $('body').append('<div class="overlay"></div>');
      $('.overlay').css({
        'position': 'absolute',
        'width': 100 + '%',
        'height': $(document).height(),
        'background': '#000',
        'opacity': 1,
        'top': 0,
        'left': 0,
        'z-index': 999
      });
      $('.playContent').css({
        'z-index': 1000
      });
      $('.playControll').css({
        'bottom': -48,
        'z-index': 1000
      });

      $('.playContent').hover(function() {
        $('.playControll').stop().animate({
          'height': 48,
        },
        500);
      },
      function() {
        setTimeout(function() {
          $('.playControll').stop().animate({
            'height': 0,
          },
          500);
        },
        2000)
      });
    } else {
      $(this).addClass('on');
      $('.overlay').remove();
      $('.playControll').css({
        'bottom': 0,
      });
    }
    e.stopPropagation();
    e.preventDefault();
  });
});

//秒转时间
function formatSeconds(value) {
  value = parseInt(value);
  var time;
  if (value > -1) {
    hour = Math.floor(value / 3600);
    min = Math.floor(value / 60) % 60;
    sec = value % 60;
    day = parseInt(hour / 24);
    if (day > 0) {
      hour = hour - 24 * day;
      time = day + "day " + hour + ":";
    } else time = hour + ":";
    if (min < 10) {
      time += "0";
    }
    time += min + ":";
    if (sec < 10) {
      time += "0";
    }
    time += sec;
  }
  return time;
}

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="willesPlay">
        <div class="playHeader">
          <div class="videoName">
            Tara - 懂的那份感觉
          </div>
        </div>
        <div class="playContent">
          <div class="turnoff">
            <ul>
              <li>
                <a href="javascript:;" title="喜欢" class="glyphicon glyphicon-heart-empty">
                </a>
              </li>
              <li>
                <a href="javascript:;" title="关灯" class="btnLight on glyphicon glyphicon-sunglasses">
                </a>
              </li>
              <li>
                <a href="javascript:;" title="分享" class="glyphicon glyphicon-share">
                </a>
              </li>
            </ul>
          </div>
          <video width="100%" height="100%" id="playVideo">
            <source src="https://dn-coding-net-production-file.qbox.me/6f7255d0-6bca-11e8-b57a-f5b28d54c40f.mp4?download/mv.mp4&e=1528634986&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:t_aTw2M5o59Sh88H91S45gs2vGk="
            type="video/mp4">
            </source>
            当前浏览器不支持 video直接播放，点击这里下载视频：
            <a href="/">
              下载视频
            </a>
          </video>
          <div class="playTip glyphicon glyphicon-play">
          </div>
        </div>
        <div class="playControll">
          <div class="playPause playIcon">
          </div>
          <div class="timebar">
            <span class="currentTime">
              0:00:00
            </span>
            <div class="progress">
              <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
              aria-valuemin="0" aria-valuemax="100" style="width: 0%">
              </div>
            </div>
            <span class="duration">
              0:00:00
            </span>
          </div>
          <div class="otherControl">
            <span class="volume glyphicon glyphicon-volume-down">
            </span>
            <span class="fullScreen glyphicon glyphicon-fullscreen">
            </span>
            <div class="volumeBar">
              <div class="volumewrap">
                <div class="progress">
                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0"
                  aria-valuemax="100" style="width: 8px;height: 40%;">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@charset "utf-8";

/*
@名称: base
@功能: 重设浏览器默认样式
*/

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{
	color:#000;background:#fff;
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
}

/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	margin:0;padding:0;
	color:#333;
	font-family: 'Microsoft YaHei', '微软雅黑', Arial, Lucida Grande, Tahoma, sans-serif;
	font-size: 13px;
}

/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}

/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
    display: inline-block;*display: inline;*zoom: 1;
}

/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
font:13px/1.5 tahoma,arial,\5b8b\4f53;
}
input,select,textarea{
font-size:100%;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, Lucida Grande, Tahoma, sans-serif;
	font-size: 13px;
}

/* 去掉各Table cell 的边距并让其边重合 */
table{
/*border-collapse:collapse;*/
border-spacing:0;
}

/* IE bug fixed: th 不继承 text-align*/
th{
text-align:inherit;
}

/* 去除默认边框 */
fieldset,img{
border:0;
}

/* ie6 7 8(q) bug 显示为行内表现 */
iframe{
display:block;
}

/* 去掉 firefox 下此元素的边框 */
abbr,acronym{
border:0;font-variant:normal;
}

/* 一致的 del 样式 */
del {
text-decoration:line-through;
}

address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}

/* 去掉列表前的标识, li 会继承 */
ol,ul {
list-style:none;
}

/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
text-align:left;
}

/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}

q:before,q:after {
content:'';
}

/* 统一上标和下标 */
sub, sup {
    font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}


a{
	color: #333;
}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
/*	color: #c00;*/
}

/* 默认不显示下划线，保持页面简洁 */
ins,a {
text-decoration:none;
}

/* 清理浮动 */
.fn-clear:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.fn-clear {
zoom:1; /* for IE6 IE7 */
}

/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide {
display:none;
}

/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {
display:inline;
}
.fn-left {
float:left;
}
.fn-right {
float:right;
}




html,body{
	width: 100%;
	height: 100%;
	background: #ef6a6c;
}
a:hover{
	text-decoration: none;
}
#willesPlay{
	/*width: 1000px;
	height: 660px;*/
	/*width: 1024px;
	height: auto;*/
	margin: 100px auto;
	box-shadow: 0px 0px 15px #333333;
	position: relative;
}
/*播放器头部*/
#willesPlay .playHeader{
	width: 100%;
	height: 48px;
	background: url(https://dn-coding-net-production-file.qbox.me/04d5bc40-6ca5-11e8-bb05-f1aec5cb7ca4.jpeg?download/playheader.jpg&e=1528635304&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:-AC5B44OdgCoo74M-XS6Y8YuyuI=) repeat-x;
	border-radius: 3px 3px 0px 0px;
}
#willesPlay .playHeader .videoName{
	font-size: 16px;
	width: 400px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	margin: 0 auto;
	color: #7a7f82;

}
#willesPlay .playContent{
	position: relative;
	height: auto;
	overflow: hidden;
	background:#000;
	cursor: pointer;
}
#willesPlay .playContent .turnoff{
	position: absolute;
	z-index: 10;
	right: -40px;
	top: 50%;
	margin-top: -90px;
}
#willesPlay .playContent .turnoff li a{
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	background: rgba(0,0,0,.5);
}
#willesPlay .playContent .turnoff li a:hover{
	color: #666;
}
#willesPlay .playContent .playTip{
	position: absolute;
	width: 110px;
	height: 110px;
	text-align: center;
	line-height: 110px;
	top: 50%;
	left: 50%;
	margin-left: -55px;
	margin-top: -55px;
	background: #ef6a6c;
	font-size: 60px;
	border: 3px solid #FFFFFF;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}
#willesPlay .playControll{
	position: absolute;
	z-index: 2147483650;
	width: 100%;
	height: 48px;
	bottom: -48px;
	background: url(https://dn-coding-net-production-file.qbox.me/04d5bc40-6ca5-11e8-bb05-f1aec5cb7ca4.jpeg?download/playheader.jpg&e=1528635304&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:-AC5B44OdgCoo74M-XS6Y8YuyuI=) repeat-x;
	border-radius: 0px 0px 3px 3px;
	-moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;   
}
#willesPlay .fullControll{
	background:rgba(0,0,0,.5);
}
#willesPlay .fullControll .timebar span{
	color: #FFFFFF;
}
#willesPlay .playControll .playPause{
	float: left;
	width: 20px;
	height: 25px;
	background: url(https://dn-coding-net-production-file.qbox.me/04d80630-6ca5-11e8-bb05-f1aec5cb7ca4.png?download/control_01.png&e=1528635486&token=goE9CtaiT5YaIP6ZQ1nAafd_C1Z_H2gVP8AwuC-5:zIOntaao_4y2ZhScmjJG0nOznmY=) 0px 0px no-repeat;
	margin: 11px 0px 0px 12px;
	cursor: pointer;
}
#willesPlay .playControll .playIcon{
	background-position: 0px -32px;
}
/*进度条*/
#willesPlay .playControll .timebar{
float: left;
width: calc(100% - 145px);
line-height: 48px;
overflow: hidden;
margin: 0 auto;
margin: 0px 0px 0px 20px;
}
#willesPlay .playControll .timebar .progress{
	float: left;
	width: 80%;
	margin: 19px 5px;
	height: 10px;
	cursor: pointer;
}
#willesPlay .playControll .timebar span{
	float: left;
	width: 8%;
	text-align: center;
}
#willesPlay .otherControl{
	float: right;
	position: relative;
}

#willesPlay .otherControl span{
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	vertical-align: middle;
	font-size: 20px;
	margin: 9px  7px;
	/*background: url(../images/control_01.png) no-repeat;*/
	cursor: pointer;
}
#willesPlay .otherControl span:nth-child(1){
	font-size: 28px;
	color: #ef6a6c;
}
/*#willesPlay .otherControl span:nth-child(2){
	background-position: -171px 0px;
}*/
#willesPlay .otherControl span:nth-child(2){
	color: #919597;
}
/*音量*/
#willesPlay .otherControl .volumeBar{
	display: none;
	position: absolute;
	top: -110px;
	left:4px;
	width: 26px;
	height: 100px;
	background:#f1f2f2;
	border-radius: 4px;
	cursor: pointer;
}
#willesPlay .otherControl .volumeBar:after{
	content:"";
	display: block;
	position:absolute;
	bottom: -7px;
	left: 5px;
	width: 0;
    height: 0;
    border-left:8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f1f2f2;
}
#willesPlay .otherControl .volumeBar .volumewrap{
	background: #a2a7aa;
	width: 8px;
	height: 80px;
	position: absolute;
	bottom: 10px;
	left: 9px;
	border-radius: 4px;
}

#willesPlay .otherControl .volumeBar .progress{
	background: none;
}
#willesPlay .otherControl .volumeBar .progress-bar{
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-radius: 4px;
}
video::-webkit-media-controls-enclosure {
    /*禁用播放器控制栏的样式*/
    display: none !important;
}
:-webkit-full-screen{}