H5自定义播放器

一.html

    <video id="myvideo">
    <source src="../big_buck_bunny.mp4" type="video/mp4">
  </video>
  <!-- 自定义播放器 -->
  <div class="divctrol">
    <img status=0 src="../play.png" alt="">
    <span class="curTime"></span>
    <span class="jd"><i></i></span>
    <span class="allTimes"></span>
  </div>

二.css

  .divctrol{
  background: pink;
  width:640px;
}
.divctrol img{
  width:30px;
  cursor: pointer;
} 
img,span{
  display: inline-block;
  vertical-align: middle;
}
.jd{
  width:500px;
  height:3px ;
  background: #fff;
  position: relative;
}
.jd i{
  position: absolute;
  top:0;
  left:0;
  width:10%;
  height:3px;
  background:red; 
}

三.js

     var btnDom = document.getElementsByTagName("img")[0];
  var videoDom = document.getElementById("myvideo");
  var allTimes = document.getElementsByClassName("allTimes")[0];  
  var curTime = document.getElementsByClassName("curTime")[0]
  btnDom.onclick = function(){
    var videoStatus = this.getAttribute("status");
    if(videoStatus == 0){
      //目前是暂停需要改成播放
      videoDom.play();
      this.setAttribute("status",1);
      this.src="../pasued.png"
    }else{
      //目前是播放需要改成暂停
      videoDom.pause();
      this.setAttribute("status",0);
      this.src="../play.png"
    }
  }
  //获取总时间
  videoDom.onloadedmetadata = function(){
    var alltime = parseInt(this.duration); 
    var str = changeTime(alltime); 
    allTimes.innerHTML = str; 
    //初始化
    var times = parseInt( this.currentTime);
    var str2 = changeTime(times); 
    curTime.innerHTML = str2;
  }
//实时更新动态时间
  videoDom.ontimeupdate = function () {
    var times = parseInt( this.currentTime);
    var str = changeTime(times); 
    curTime.innerHTML = str;
    //进度条逻辑
    /*
      当前进度百分比：当前时间s除以总时间s. 得到百分比
      把进度条红线i标签的宽设置成对应百分比
    
    */
  }

  function  changeTime(times) {  
      //换算时间
    /*
      不够一分钟 00:10
      超过一分钟：01:10
    */
    if(times<60){
      times = times<10?'0'+times:times;
      return "00:"+times
    }else{
      //先得分钟 times/60 取整
      // 秒数是 times%60  取余得到秒数
      var min = parseInt(times/60);
      var sec = times%60;
      min = min<10?'0'+min:min;
      sec = sec<10?'0'+sec:sec;
      return  min+":"+sec; 
    }

  }