Component({
properties: {
//视频播放列表
videoList: {
type: Array,
value: [{
url: 'http://1310895430.vod2.myqcloud.com/acb3025cvodbj1310895430/8899089c387702302247202150/MZdixh89MtgA.mp4',
duration: '103',//视频对应的秒钟
}, {
url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
duration: '330'
}]
},
// 视频总长度（1:10:10）
},
data: {
// 视频下标
index: 0,
video: '',
// 视频总长度（秒）
duration: '',
// 视频播放时间段（0:01）
startTime: '00:00',
// 视频总长度（10:10）
endTime: '00::00',
// 视频播放进度（百分比）
percent: '0',
totalTime:'0',
// 是否在拖动
isSlide: false,
playStates: false,//true开始 false暂停
},
lifetimes: {
ready: function () {
this.setData({
video: wx.createVideoContext('video', this),
totalTime:this.properties.videoList.reduce((sum, e) => sum + Number(e.duration || 0), 0),
endTime: this.timeToMinute(this.properties.videoList.reduce((sum, e) => sum + Number(e.duration || 0), 0)),
defaultVideo:this.data.videoList[this.data.index].url
})
}
},
// 初始化实例
onReady() {
},
methods: {
// 暂停播放按钮
videoOpreation() {
console.log("播放暂停")
this.data.playStates ? this.data.video.pause() : this.data.video.play();
this.setData({
playStates: !this.data.playStates
})
},
// 监听播放初始化
bindloadedmetadata(e) {
// let {duration} = e.detail
// duration = duration.toFixed()
// let startTime=0;//计算视频的时间是上个视频的时间加上当前视频的播放时间
// for(var i=0;i<this.data.index;i++){
// startTime+=this.data.videoList[i].duration;
// }
// this.setData({
// duration: duration+startTime,
// endTime: this.timeToMinute(duration),
// })
console.log("监听播放初始化")
},
// 监听播放进度
bindtimeupdate(e) {
let {currentTime, duration} = e.detail;
let startTime=0;//计算视频的时间是上个视频的时间加上当前视频的播放时间
for(var i=0;i<this.data.index;i++){
startTime+=parseInt(this.data.videoList[i].duration);
}
console.log("当前视频的进度条时间currentTime"+currentTime)
// console.log('startTime:'+startTime)
let nowTime=this.data.index==0?currentTime:currentTime+startTime;
this.setData({
startTime: this.timeToMinute(nowTime),
percent: ((nowTime) / this.data.totalTime * 100).toFixed(2),
})
console.log("开始时间"+this.data.startTime)
console.log("当前视频"+this.data.index)
this.triggerEvent('refreshVideo', {
nowTime: nowTime
}, {});
},
// seek 完成时触发
bindseekcomplete() {
console.log("seek 完成时触发")
this.setData({
isSlide: false
})
},
//视频播放出错
error(e){
// this.data.video.play()
console.log(e)
},
//视频播放结束
ended() {
if (this.data.index == this.data.videoList.length - 1) {
this.data.video.pause()
wx.showToast({
title: '已播放完成',
icon: 'none',
duration: 1000,
mask: true,
})
this.setData({
index: 0,
playStates:false
})
} else {
console.log('播放下一个视频')
this.videoPlay();
}
},
videoPlay() {
console.log("我是下一个视频")
var videolLength = this.data.videoList.length;
this.setData({
index: this.data.index+1,
playStates:true
})
// console.log(this.data.index)
this.data.video.autoplay ='true';//设置自动播放
this.data.video.play()//播放视频
},
// 完成一次拖动后触发
bindchange(e) {
console.log("bindchange完成一次拖动后"+e.detail.value)
this.setSlide(e.detail.value)
let {value} = e.detail
let {video, duration} = this.data
let seekpeed=value / 100 * this.data.totalTime;
// console.log("seekpeed"+seekpeed)
let startTime=0; //判断是第几个视频，只要找到下标就结束循环
var videolLength = this.data.videoList.length;
for(var i=0;i<this.data.videoList.length;i++){
if(seekpeed<this.data.videoList[i].duration){//进度小的
this.setData({
index: i,
})
break;
}else{
startTime+=parseInt(this.data.videoList[i].duration);//进度大的
this.setData({
index: i+1,
})
break;
}
}
console.log("拖拽结束之后的视频开始时间"+startTime);
console.log("拖拽结束之后当前视频下标"+this.data.index)
let seek=parseInt(seekpeed-startTime);//跳转的位置
console.log("跳转的位置"+seek)
this.data.video.play()//播放视频
this.data.video.seek(seek);
this.setData({
startTime: this.timeToMinute(seekpeed),//拖拽结束后的开始时间显示
playStates:true,
isSlide: false
})
},
// 拖动过程中触发
bindchanging(e) {
console.log("bindchanging拖动过程中触发"+e.detail.value)
this.setSlide(e.detail.value)
},
// 设置进度条
setSlide(value) {
console.log("拖拽到的位置setSlide"+value)
let startTime=value / 100 * this.data.totalTime;
this.setData({
isSlide: true,
percentSlide: value,
startTime: this.timeToMinute(startTime),//拖拽中的开始时间显示
})
},
// https://blog.csdn.net/qq_31984879/article/details/84071245
// 秒转换分钟00:00:00格式
timeToMinute(times) {
let t;
if (times > -1) {
let hour = Math.floor(times / 3600);
let min = Math.floor(times / 60) % 60;
let sec = times % 60;
// if (hour < 10) {
// t = '0' + hour + ":";
// } else {
// t = hour + ":";
// }
if (min < 10) {
t = "0" + min + ':';
}else{
t = min + ":";
}
if (sec < 10) {
t += "0";
}
t += sec.toFixed(2);
}
t = t.substring(0, t.length - 3);
return t;
},
// 把0
评论1