摘要：當(dāng)前的播放進(jìn)度條的寬度等于當(dāng)前播放時(shí)間視頻總長(zhǎng)度。三點(diǎn)擊進(jìn)度條位置跳轉(zhuǎn)到指定視頻播放的位置鼠標(biāo)在播放條上點(diǎn)擊時(shí)進(jìn)行捕獲并進(jìn)行處理播放
{{currentTime*1000 | date:"mm:ss"}}
{{ durationLength*1000 | date:"mm:ss" }}
試學(xué)結(jié)束，請(qǐng)購(gòu)買后學(xué)習(xí)完整課程
**
一：控制視頻播放暫停
**
//點(diǎn)擊播放或者暫停
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;
}
}
二：試看功能，播放進(jìn)度條功能
//獲取進(jìn)度條
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));
//試看時(shí)間控制
if(parseInt(this.currentTime) == 1000){
this.runtime.plugins.JQuery(".video-bg").css("display","block");
this.myVideo[0].pause();
}
}
當(dāng)前視頻播放到10s后如果未購(gòu)買，要購(gòu)買才能看完整視頻。
當(dāng)前的播放進(jìn)度條的寬度等于當(dāng)前播放時(shí)間/視頻總長(zhǎng)度。
三：點(diǎn)擊進(jìn)度條位置 跳轉(zhuǎn)到指定視頻播放的位置
// 鼠標(biāo)在播放條上點(diǎn)擊時(shí)進(jìn)行捕獲并進(jì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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92946.html
