Files
AGuestSaas/components/swiperVideo/swiperVideo.js
2020-12-30 11:50:55 +08:00

124 lines
3.0 KiB
JavaScript

/**
* Web唐明明
* 一个梦想做木雕手艺人的程序员
* explain: videoSwiper
*/
Component({
/**
* 组件的属性列表
*/
properties: {
// 视频列表
videoList: {
type : Array,
value : []
},
// 是否自动播放
autoPlay: {
type : Boolean,
value : true
},
// 视频展示方式
fit:{
type : String,
value : "contain"
}
},
/**
* 组件的初始数据
*/
data: {
controls: false,
showPlay: false,
isPlay : false,
playId : 0
},
/**
* 组件的方法列表
*/
methods: {
// 视频滚动了
changeVideo(e){
let videoLists = this.data.videoList,
current = e.detail.current,
currentId = this.data.playId,
prevId = videoLists[current].video_id
// 滚动回调
this.triggerEvent("swiperindex", {current: current})
// 停止老
let videoContextCurrent = wx.createVideoContext("video" + currentId, this)
videoContextCurrent.stop()
// 播放新
let videoContextPrev = wx.createVideoContext("video" + prevId, this)
videoContextPrev.play()
this.setData({
isPlay: true,
playId: prevId
})
},
//视频播放控件
videoPlay(e){
let videoId = e.currentTarget.dataset.videoid,
videoContext = wx.createVideoContext("video" + videoId, this),
isPlayState = this.data.isPlay
if(isPlayState){
videoContext.pause()
}else{
videoContext.play()
}
this.setData({
isPlay : !isPlayState
})
},
// 视频播放状态
vipdeBindPlay(e){
this.triggerEvent("play", {
playType : e.type,
videoId : e.currentTarget.dataset.videoid
})
if(e.type == "play"){
this.setData({
isPlay: true
})
}else if(e.type == "pause"){
this.setData({
isPlay: false
})
}
}
},
/**
* 生命周期组件
*/
lifetimes: {
attached(){
let videoList = this.data.videoList
// 默认当前视频id
if(videoList.length > 0){
this.setData({
playId: videoList[0].video_id
})
// 是否默认播放
if(this.data.autoPlay){
let playVideoContext = wx.createVideoContext("video" + videoList[0].video_id, this)
playVideoContext.play()
}
}
}
}
})