ionic2手写制作video的控制栏，app

  



  
    
    
    
{{currentTime*1000 | date:'mm:ss'}}
  
  
    

      

        

      
    
  
  
    
    
{{ durationLength*1000 | date:'mm:ss' }}
  


  
试学结束，请购买后学习完整课程
  立即购买




  

**

一：控制视频播放暂停

**
//点击播放或者暂停
runPlay(){

this.myVideo = this.runtime.plugins.JQuery('#videoAttr');
if(this.myVideo[0].paused){
  this.myVideo[0].play();
  this.progressFlag = setInterval(() =>{
    this.getProgress();
  },1000);
  this.isPlay = true;//播放暂停按钮切换
  this.runtime.plugins.JQuery('.arrowback2').remove();

}else{
  //暂停播放
  this.myVideo[0].pause();
  clearInterval(this.progressFlag);
  this.isPlay = false;
}

}

二：试看功能，播放进度条功能

//获取进度条
getProgress(){

this.myVideo = this.runtime.plugins.JQuery('#videoAttr');
this.progressWrap = this.runtime.plugins.JQuery('.progressWrap');
this.playProgress = this.runtime.plugins.JQuery('.playProgress');
this.durationLength = this.myVideo[0].duration;
this.currentTime = this.myVideo[0].currentTime;
console.log('666',this.currentTime);
this.percent = this.currentTime / this.durationLength;      //获取视频播放到百分比
this.playProgress.width(this.percent * (this.progressWrap[0].offsetWidth));
//试看时间控制
if(parseInt(this.currentTime) == 1000){
  this.runtime.plugins.JQuery('.video-bg').css("display","block");
  this.myVideo[0].pause();
}

}
当前视频播放到10s后如果未购买，要购买才能看完整视频。
当前的播放进度条的宽度等于当前播放时间/视频总长度。

三：点击进度条位置 跳转到指定视频播放的位置

// 鼠标在播放条上点击时进行捕获并进行处理
videoSeek(e){

clearInterval(this.progressFlag);
this.progressWrap = this.runtime.plugins.JQuery('.progressWrap');
this.playProgress = this.runtime.plugins.JQuery('.playProgress');
var length = e.pageX - this.progressWrap[0].offsetLeft;
this.percent = length / this.progressWrap[0].offsetWidth;
this.playProgress.width(this.percent * (this.progressWrap[0].offsetWidth));
this.myVideo[0].currentTime = this.percent * this.myVideo[0].duration;
this.myVideo[0].play();//播放
this.progressFlag = setInterval(() =>{
  this.getProgress();
},1000);

}