html视频播放器

H5为我们提供了标签，controls属性就是视频控制台，显示了视频播放进度，控制音量、全屏等，极为方便。
但我们不能修改他的样式，要写出符合自己网站风格的样式就无法实现。
所以实现控制台代码就很重要。

该例中我们需要引入jquery库和font-awesome库

html

<figure>
  <figcaption>视频播放器figcaption>
  <div class="player">
    <video id="video">
      <source src="assets/video/a.ogg" type="video/ogg">
      <source src="assets/video/a.mp4" type="video/mp4">
      <source src="assets/video/a.WebM" type="video/WebM">
    video>
    
    
    <section class="control">
      
      <a href="javascript:;" class="btn fa fa-play">a>
      
      <div class="progress" width="502">
        <div class="line">div>
      div>
      
      <div class="timer">
        <span class="current">00:00:00span> / 
        <span class="total">00:00:00span>
      div>
      
      <a href="javascript:;" class="btn volume fa fa-volume-up">a>
      
      <a href="javascript:;" class="btn fa fa-expand">a>
    section>
  div>
figure>

js

// 获取元素
var video=document.querySelector("video");
var play=document.querySelector(".fa-play");
var current=document.querySelector(".current");
var total=document.querySelector(".total");
var progress=document.querySelector(".progress");
var line=document.querySelector(".line");
var volume=document.querySelector(".volume");
var expand=document.querySelector(".fa-expand");
var current_time;


video.addEventListener("canplay", function(){
  video.style.display="block";

  // 点击播放
  play.onclick=function(){
    if(video.paused){
      video.play();
    }else{
      video.pause();
    }
    this.classList.toggle("fa-pause");
  }

  // 点击静音
  volume.onclick=function(){
    this.classList.toggle("fa-volume-off");
    this.classList.toggle("fa-volume-up");
    // 如果不是静音
    if ( !video.muted ) {
      video.muted=true;
    }else{
      video.muted=false;
    }
  }

  var total_time=video.duration;
  var h = parseInt(total_time/3600);
  var m = parseInt(total_time%3600/60);
  var s = parseInt(total_time%60);

  h = h>=10? h:"0"+h;
  m = m>=10? m:"0"+m;
  s = s>=10? s:"0"+s;
  total.innerHTML = h + ":" + m + ":" + s;

  // 监听当前播放时间
  video.addEventListener("timeupdate", function(){
    current_time = this.currentTime;

    var h = parseInt(current_time/3600);
    var m = parseInt(current_time%3600/60);
    var s = parseInt(current_time%60);

    h = h>=10? h:"0"+h;
    m = m>=10? m:"0"+m;
    s = s>=10? s:"0"+s;
    current.innerHTML = h + ":" + m + ":" + s;

    var new_width = current_time/total_time*100+"%";
    line.style.width = new_width;

  });

  // 跳播
  progress.onclick=function(e){
    var percent = e.offsetX/this.getAttribute("width");

    video.currentTime=percent*total_time;
  }

  // 最大化
  expand.onclick=function(){
    video.webkitRequestFullScreen();
  }
});

css

*{margin:0;padding:0;}
a{text-decoration: none;}
li{list-style: none;}
figcaption{
  text-align: center;
  font-size: 20px;
  padding: 20px;
}
.player {
  width: 55%;
  height: 520px;
  margin: 0 auto;
  border-radius: 4px;
  background: #000 url(assets/img/bg.jpg) center no-repeat;/*视频未播放时显示该图片*/
  background-size: cover;
  position: relative;
}
video {
  display: none;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.control{
  position: absolute;
  bottom: 0;
  width: 100%;
}
/*按钮*/
.btn {
  display: inline-block;
  width: 2%;
  height: 20px;
  font-size: 20px;
  color: #FFF;
  margin: 15px 20px;
}
.progress, .timer{
  display: inline-block;
}
/*进度条*/
.progress{
  width: 60%;
  /*width: 502px;*/
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #555;
  cursor: pointer;
  margin: 0 10px 0 0;
}
/*播放进度*/
.progress .line {
  width: 0;
  height: 100%;
  background-color: #FFF;
}
/*时间*/
.timer {
  width: 16%;
  height: 20px;
  line-height: 20px;
  color: #FFF;
  font-size: 14px;
}