摘要：當前的播放進度條的寬度等于當前播放時間視頻總長度。三點擊進度條位置跳轉(zhuǎn)到指定視頻播放的位置鼠標在播放條上點擊時進行捕獲并進行處理播放
{{currentTime*1000 | date:"mm:ss"}}
{{ durationLength*1000 | date:"mm:ss" }}
試學結(jié)束，請購買后學習完整課程
**
一：控制視頻播放暫停
**
//點擊播放或者暫停
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后如果未購買，要購買才能看完整視頻。
當前的播放進度條的寬度等于當前播放時間/視頻總長度。
三：點擊進度條位置 跳轉(zhuǎn)到指定視頻播放的位置
// 鼠標在播放條上點擊時進行捕獲并進行處理
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);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92946.html
