uniapp实现视频上下滑动功能（小程序）以及video组件的暂停和播放 |
您所在的位置：网站首页 › 微信小程序全屏播放视频怎么弄 › uniapp实现视频上下滑动功能（小程序）以及video组件的暂停和播放 |
|
uni推荐使用swiper组件实现，在video组件的下面介绍有写。 这里实现方式是： 父组件先用swiper组件实现纵向滑动，然后在每个swiper-item中插入视屏组件video-item-vx（自己定义的组件），在video-item-vx组件中实现视屏播放，具体别的细节根据需要自己实现。 注意：不能无限添加swiper-item，16个以上会容易出现视频异常的报错，可以10个swiper-item循环，替换数据即可。 第一步：维护10个swiper-item，10个以上替换数据即可。 第二步：判断上滑还是下滑up down，用来判断videoIndex加减。 第三步：维护一个下标 videoIndex , 作用就是取二维数组的数据进行渲染。 第四步：维护一个二维数组作为数据源 [ [10条数据], [...] , ...]。 初始的数据源可以请求两次，避免了好多麻烦。 第五步：判断是否要首尾衔接 一、视屏屏纵向上下滑动1、父组件html 备注：data中的数据 indicatorDots: false, // 是否显示面板指示点 autoplay: false, // 是否自动切换 vertical: true, // 滑动方向是否为纵向 duration: 800, circular: false, // 是否衔接滑动 current_: 0, // 当前所在视频的 index videoIndex: 0, // 维护的视屏下标 videoListAll:[], // 数据源 total: 0, // 视频总条数 isTwo: false, // 初始的时候是否请求了两次 isSuccess: true, // 请求是否失败 touchDirection: ‘’, // 滑动方向 current0: ‘’, // 上一个swiper下标 isRequest: false, // 是否在请求数据 2、父组件的js @transition事件swiper-item 的位置发生改变时会触发，用来判断上滑还是下滑 transition (event) { // 在export default外定义一个数组 touchArr // // let touchArr = [] // export default {} // touchArr.push(event.detail.dy) if( touchArr.length > 1 ){ if( touchArr[touchArr.length-1] - touchArr[touchArr.length-2] > 0){ this.touchDirection = 'up' }else{ this.touchDirection = 'down' } } },@change事件swiper-item 的current下标改变时触发，用来维护videoIndex下标 change (event) { console.log('==========(触发了change)========>>>') touchArr = [] // 维护下标 // console.log('==========(touchDirection(change里面的))========>>>', this.touchDirection) if (this.touchDirection == 'down') { this.videoIndex-- } else if (this.touchDirection == 'up') { this.videoIndex++ this.circular = false // 每次videoIndex改变先设为false } // 防止维护的下标为负的时候白屏 if (this.videoIndex = this.total) { this.videoIndex = this.total - 1 this.current_ = this.total - 1 } else { // 修正swiper下标 this.current_ = this.videoIndex % 10 } },@animationfinish事件 // swiper动画结束执行 videoAnimationfinish(event) { // 如果在请求中，swiper不做首尾衔接 if (this.isRequest) { this.circular = false // 不衔接 uni.showToast({title: '加载中', icon: 'none', duration: 1000}) return } // 没有数据了 if (this.videoIndex == this.total-1) { uni.showToast({title: '没有更多了', icon: 'none', duration: 1000}) return } },监听维护的videoIndex下标，从而维护数组 watch: { videoIndex (val) { // 维护数组 let videoIndex_ = this.videoIndex % 10 let index_ = parseInt(this.videoIndex / 10) // 判断是否衔接 this.isCircular(videoIndex_) // 加载数据 if (this.touchDirection == 'up' && videoIndex_ == 4) { // 第5个加载数据 if (!this.videoListAll[index_+1]) { // 如果有数据就不加载了 this.videoList(index_) } } // 请求失败时第九个再次请求 if (this.touchDirection == 'up' && videoIndex_ == 8) { if (!this.videoListAll[index_+1] && !this.isSuccess) { // 如果有数据就不加载了 this.videoList(index_) } } // 分享参数 let detail = this.videoListAll[index_][videoIndex_] if (detail) { this.videoIdFX = detail.videoId this.title = detail.title this.videoImageFile = detail.videoImageFile && detail.videoImageFile.imageUrl; } // 标记上一个下标 this.current0 = this.videoIndex % 10 this.current_ = videoIndex_ } },判断是否衔接 isCircular (type) { // 1、维护的下标小于等于0时 if (this.videoIndex = this.total-1) { this.circular = false return } // 3、总数小于等于10时 if (this.total 1){ this.pageNum = Number(this.pageNum) - 1 } this.videoList(); }, // 获取视频列表 videoList(index) { if (this.isRequest) return // 防止重复请求 this.isRequest = true this.isSuccess = false this.$fetch({ url: 'VIDEO_LIST_VX', data: { themeId: this.themeId || '', pageNum: this.pageNum, queryType: this.queryType, channelType: 'MP', accountId: this.$store.state.accountId // || 'F00012306' } }).then((res) => { if (res.code === '000000' && res.data) { let videoListAll = res.data.list; console.log('=======发了请求videoListAll=====>>>', videoListAll) this.isloading = true if (videoListAll.length = 10) { this.$store.commit('setShowPageLoading', false); return } this.videoListAll[Number(this.pageNum)-1] = videoListAll // 处理视频顺序 let that = this index = index || Number(this.pageNum)-1 if (!this.isTwo && that.pageNum >= that.option.pageNum) { this.videoListAll[index].map((item, index) => { if (item.videoId == that.videoId) { that.current_ = index that.videoIndex = index + (Number(this.pageNum)-1) * 10 that.current0 = index that.title = item.title that.videoImageFile = item.videoImageFile && item.videoImageFile.imageUrl; that.videoId = '' this.$store.commit('setShowPageLoading', false); } }) if (that.pageNum > that.option.pageNum) this.isTwo = true } console.log('==========(视频列表数据)========>>>',this.videoListAll) that.total = that.total + videoListAll.length this.pageNum = Number(this.pageNum) + 1 this.isSuccess = true this.isRequest = false if (!this.isTwo) { console.log('==========(请求第二次)========>>>') this.videoList() } this.isCircular(this.videoIndex % 10) // 请求成功再调一次衔接判断 } else { this.isSuccess = false res.message && uni.showToast({title: res.message, icon: 'none'}); this.isloading = true this.$store.commit('setShowPageLoading', false) } }).finally(() => { this.isRequest = false // this.$store.commit('setShowPageLoading', false); }); }, 二、子组件实现视屏播放与暂停使用uni的video组件实现，更多详情参照uni官网 先使用uni的createVideoContext()方法获取video对象，再使用video对象的play()和pause()方法实现播放和暂停 1、子组件的html 2、子组件的js 在mounted或created中根据video组件的id获取video对象指向video // 监听传过来的参数判断视频的播放与暂停 watch: { current: { immediate: true, handler: function() { this.video = uni.createVideoContext('myVideo', this); this.$nextTick(() => { if (this.current != this.videoIndex) { this.stopPlay() }else { this.playVideo() } }) } } }, mounted () { // 创建视频对象 this.video = uni.createVideoContext('myVideo', this); }, methods: { // 自定义播放按钮 playVideo () { this.video.play() // 播放视频 // this.video.pause() // 暂停视频 } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |