摘要：当前的播放进度条的宽度等于当前播放时间视频总长度。三点击进度条位置跳转到指定视频播放的位置鼠标在播放条上点击时进行捕获并进行处理播放
**
一：控制视频播放暂停
**
//点击播放或者暂停
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);
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92946.html
