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

<div class="video-div">

<!--播放图标-->
<button class="arrowback2" ion-button clear (click)="runPlayFirst($event)">
  <img width="13px" src="./assets/images/playbtn.png">
</button>
<!--控制条部分-->
<ion-row class="controls-div">
  <ion-col col-auto class="controls-fl fl">
    <img class="fl" style="margin-right: 10px;" (click)="runPlay()" *ngIf="!isPlay" height="20px" src="./assets/img/icon/stop.png">
    <img class="fl" style="margin-right: 10px;" (click)="runPlay()" *ngIf="isPlay" height="16px" src="./assets/img/icon/play.png">
    <div class="controls-time fl">{{currentTime*1000 | date:'mm:ss'}}</div>
  </ion-col>
  <ion-col col-auto class="progress-mid fl">
    <div class="videoControls">
      <div class="progressWrap" (click)="videoSeek($event)">
        <div class="playProgress"></div>
      </div>
    </div>
  </ion-col>
  <ion-col col-auto class="controls-fl fr">
    <img class="controls-full fr" height="20px" (click)="runFull()" src="./assets/img/icon/full.png">
    <div class="controls-mid fr">{{ durationLength*1000 | date:'mm:ss' }}</div>
  </ion-col>
</ion-row>
<div class="video-bg" align="center">
  <p>试学结束，请购买后学习完整课程</p>
  <button class="videobuy-btn" (click)="openPayment(videoDetails)" ion-button>立即购买</button>
</div>
<video id="videoAttr" poster="./assets/img/liebiao1.png" src="http://118.190.68.206:8090/media/file/a.mp4" height="250"></video>
<!--分享-->
<button class="arrowend" ion-button clear>
  <ion-icon><img width="20px" src="./assets/img/share.png"></ion-icon>
</button>

</div>

**

一：控制视频播放暂停

**
//点击播放或者暂停
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);

}