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);

}