微信小程序实现 短视频无限播放效果(类似快手小程序，抖音app的短视频滑动)
2024-05-12 20:30:29
实现原理
利用小程序内置组件 swiper+video 来制定逻辑的方向
实现方式
设定swiepr-item数量为4，也就是在swiper里面同时展示4个video，避免过多导致页面卡顿例： (假设数据请求一次获取6组数据)[now, new, new, new] // 数据首次加载，将数据放置swiper盒子中[old, now, new, new] // 向下滑动第一次(手指向下滑动,也就是看下一个视频)[new, old, now, new] // 向下滑动第二次，也就是在swiper滑动到第三个的时候，启用轮循[new, new, old, now] // 启用轮循之后，每次下滑都会将swiepr内的当前的swiper-item的未来第二个swiper-item替换以此类推...
swiper组件是 首尾衔接的循环状态
当前观看视频下标在内的上下 总计三条数据的swiper-item为可视区域(除去第一次请求)，数据的切换需要在可视区域外做处理，也就是 重复数据在 可视区域外的下一次滑动中出现时，需要做处理，也就是说，每一次的滑动，只需要处理掉可视区域之外的那条数据即可
关于衔接滑动：主要作用阻止swiper在首次加载的时候向上滑，导致滑动到下标为3的swiepr-item上如果滑动过快，网络较差，有可能会导致videoBoxIndex > videoBox.length 具体下文会有所处理
实现它
参数设定
data:{swiperVideoDataList: [], // swiper内循环的videovideoBox: [], // 存放所有video的盒子videoBoxIndex: 0, // 总下标indexCurrent: 0, // 当前播放视频的下标circularBol: false, // swiper是否允许衔接滑动pageIndex: 0, // 当前页noNetWorkType: false, // 当前网络type 可以进行加载or网络错误 true or false
}滑动规则
下滑规则
一轮 videoBoxIndex - 2 替换 - 0 实际 4 - ((videoBoxIndex % 4) + 2) -- 0二轮 vI - 3 替 - 1 实 -- -1三 vI - 4 替 - 2 实 -- 2四 vI - 5 替 - 3 实 -- 1五 vI - 6 替 - 0 实 -- 0 -- 新一轮六 vI - 7 替 - 1 实 -- -1七 vI - 8 替 - 2 实 -- 2八 vI - 9 替 - 3 实 -- 1九 vI - 10 替 - 0 实 -- 0 -- 新一轮十 vI - 11 替 - 1 实 -- -1十一 vI - 12 替 - 2 实 -- 2十二 vI - 13 替 - 3 实 -- 1十三 vI - 14 替 - 0 实 -- 0 -- 新一轮...so if 实 === 1 实 = 3abs(实)
上滑规则
11-1 12-2 13-3 14-0九 vI - 10 替 - 实 - 0 --- (videoBoxIndex - (videoBoxIndex>6? 4 : 0) - 2) % 4八 vI - 9 替 - 实 - 3七 vI - 8 替 - 实 - 2六 vI - 7 替 - 实 - 1五轮 videoBoxIndex - 6 替换 - 0 实际 0四 vI - 5 s替 - 0 实 -- 3三 vI - 4 替 - 3 实 -- 2二 vI - 3 替 - 0 实 -- -1
代码实现
// 获取数据
getVideoDataList(){const that = thislet obj = {u: 'url',method: 'POST',data:{pageIndex: this.data.pageIndex}}request(obj).then(res => {let dataArr = res.body.datalet newVideoBox = [...that.data.videoBox, ...dataArr]that.setSwiperData(that.data.swiperVideoDataList,newVideoBox,that.data.videoBoxIndex)that.setData({pageIndex: that.data.pageIndex + 1,})// 首次加载的时候，加载完数据之后主动进行播放，其余都是在滑动之后进行播放if (that.data.pageIndex === 1) that.videoPlayerControl(that.data.indexCurrent)})
},
// 修改swiper内数据
/*
参数
swiperData: 最新的swiperVideoDataList
videoBox: 最新的videoData
videoBoxIndex: 最新的videoBoxIndex
sort: 正序--true 倒序--false type:Boolean
*/
setSwiperData(swiperData, videoBox, videoBoxIndex, sort = true) {let that = thislet datas = [...swiperData]if (that.data.pageIndex === 0) {// 首次加载的时候，只进行截取数据，不做其余处理datas = videoBox.slice(videoBoxIndex, 4)} else {if(sort){// 计算要替换的下标let idx = swiperData.length - ((videoBoxIndex % 4) + 2)// 修正错误的下标(可能是逻辑错误，当前运用规律直接将错误修正)let saveIndex = Math.abs(idx === 1 ? 3 : idx)// 要替换的新数据let newDataList = videoBox[videoBoxIndex + 2]// 替换数据datas.splice(saveIndex, 1, newDataList)console.log('下滑修改swiper数据')}else{// 计算要替换的下标let idx = (videoBoxIndex - (videoBoxIndex > 6 ? 4 : 0) - 2) % 4// 修正错误的下标(可能是逻辑错误，当前运用规律直接将错误修正)let saveIndex =videoBoxIndex > 1 ?Math.abs(idx) + 1 === 4 ?0 :Math.abs(idx) + 1 :Math.abs(idx)// 要替换的新数据let i = (videoBoxIndex === 1 ? 2 : videoBoxIndex + 1) - 2let newDataList = videoBox[i] || null// 替换数据if (videoBoxIndex > 0) datas.splice(videoBoxIndex === 1 ? 0 : saveIndex, 1, newDataList)console.log('上滑滑修改swiper数据')}}this.setData({swiperVideoDataList: datas,videoBox,circularBol: videoBoxIndex > 1 &&videoBoxIndex + 4 <= videoBox.length &&!this.data.noNetWorkType,})
}
// 滑动触发 此方法参数 e 为swiper中携带 参考小程序 swiper API -- bindchange
swiperChange(e){let that = this// 正序 - true 倒序 - falselet bol =(that.data.indexCurrent + 1 === 4 ? 0 : that.data.indexCurrent + 1) ===e.detail.currentlet newBoxIndex = bol ?that.data.videoBoxIndex + 1 :that.data.videoBoxIndex - 1// 判断当前网络状态 当断网的时候，不进行衔接滑动 -- 具体判断状态方式此文不阐述，具体参考 小程序 API -- wx.getNetworkTypethis.getNetworkTypeMes()// 判断条件1 -- 到达预定获取数据点且是下滑 条件2 -- 当前视频总下标 + 4 大于 总数据长度，网络较差||无网络if ((this.data.videoBoxIndex + 5 === this.data.videoBox.length && bol) ||this.data.videoBoxIndex + 4 >= this.data.videoBox.length) {console.log('请求数据下滑处理', this.data.indexCurrent)videoTimer = setTimeout(()=> {that.getVideoDataList()clearTimeout(videoTimer)}, 600)// 条件一，向下滑动次数>=2， >=2时开始轮循 条件二，且向下滑动次数 >= 1 保证当boxIndex===1的时候将 indexCurrent === 0 的swiepr数据替换 (正常情况下都是替换 indexCurrent - 2 的数据 但是当boxIndex === 1 && indexCurrent === 1 的时候，只能替换首条)} else if (newBoxIndex >= 2 || (!bol && newBoxIndex >= 1)) {console.log('普通滑动处理')this.setSwiperData(this.data.swiperVideoDataList,this.data.videoBox,newBoxIndex,bol)}this.setData({swiperVideoDataList: newSwiperData,indexCurrent: e.detail.current,videoBoxIndex: newBoxIndex,},() => {// 每次下滑将所有的video暂停，防止滑动之后个别video声音异常for (let i = 0; i < 4; i++) {wx.createVideoContext(`myVideo${i}`).pause()}// 将当前video播放进度改为0s起始wx.createVideoContext(`myVideo${e.detail.current}`).seek(0)})
}
// 滑动滑动结束时触发
animationEnd(e) {let data = [...this.data.swiperVideoDataList]if (data.length > 1) this.videoPlayerControl(e.detail.current)
},
videoPlayerControl(index){// 此为视频播放处理，该咋搞咋搞
}大概就是这个样子了，主要的轮循逻辑都在代码里面展示了，躯干完成了，接下来的一些小功能也就手到擒来了
7-29
在此补充小程序代码片段链接～ 点此跳转
如果要轮循不断获取短视频进行播放的话，就会遇到几个有趣(头秃)的问题
- 断网处理
- IOS 13.5 版本 两指分别滑动会导致swiper卡屏(貌似是swiper组件的bug,期待技术员修复)
- swiper-item首次滑动 下标为1滑动到2 的过程中，如果手指滑动过快，会导致 动画丢失 且连带 swiper组件的bindanimationfinish事件不被触发 (这个似乎也是swiper的bug…)
- 上拉刷新以及上拉刷新之后video缓存问题
- 等等等等(想不到了…)
这些问题都相当的有意思，大家如果有什么好的思路可以评论讨论一下～
有什么问题的话欢迎评论区留言～
如果转载请标明本文地址～
微信小程序实现 短视频无限播放效果(类似快手小程序，抖音app的短视频滑动)相关推荐
- 爬虫进阶教程：抖音APP无水印视频批量下载
一.前言 本文为两类人准备:技术控和工具控. 如果你是工具控,想简单方便地下载无水印的视频,那么可以使用第三方去水印平台: 抖音短视频解析下载平台 如果你是技术控,想要使用自己写的代码下载视频,那么可 ...
- 在抖音APP源码中如何实现播放器的音视频同步
在抖音APP源码中音频和视频的播放是在不同线程中进行的,而且音频和视频都有自己的时间戳,所以需要同步机制保障音画同步. 抖音APP源码有多种机制可以做到音视频同步:a. 音频同步于视频.b. 视频同步 ...
- 如何让抖音上热门 修改视频md5值有什么用
如何让抖音上热门 修改视频md5值有什么用 在流量已经被证明是一种无效资源的大背景下,短视频行业盲目地加大自身在流量上的作用,无疑是一场冒险.,抖音的热门推荐机制 ...
- 详谈抖音怎么发长视频（60s）？有怎么设置视频置顶？
相信玩抖音的朋友应该都有过这样的疑问,为什么别人的视频时间可以拍60s并且还能在主页置顶?而自己的只有短短十来秒还不能置顶视频. 一.首先我们来说说抖音怎么拍60s长视频: [个人账号开通抖音长视频权 ...
- 新版带支付功能2021全新最火表情包小程序源码，无限裂变，斗图小程序，头像壁纸，外卖服务内附详细搭建教程
内附详细搭建教程 1.全新表情包小程序已上线 2.增加外卖系统服务,进行进一步的扩展内容分销 3.独立后台系统,自己运营管理,广告位自己控制 4.流量主可以代开,小程序包通过审核,不通过不收钱 5.不 ...
- 抖音App已正式更名，短视频在名称中消失
原创 陈桥辉 Tech星球 全面出击的抖音. Tech星球(微信ID:tech618) 文 | 陈桥辉 头图 | IC Photo "抖音短视频"已成为过去式,9月28日,去掉&q ...
- “内卷化”的快手与抖音——2020年短视频的“无聊经济”往何处去
文|编程浪子 来源|螳螂财经(ID:TanglangFin) 2020年新春伊始,快手以10亿红包和30亿左右的合作费在十余家的竞争下艰难拿下春晚,随之而来迅速蔓延的疫情带来的"无聊经济&q ...
- 深度解析，抖音玩具测评短视频内容制作流程，步骤技巧分享
做项目想赚钱,就要抓住最好花钱的那群人.谁的钱比较好赚? 首当其冲的就是女人,然后就是小孩了.女人掌控了 70%的家庭支出, 而大部分家庭都十分宠爱孩子,为了孩子很舍得花钱,但凡你能抓住其中一点,赚钱 ...
- 一人一天，如何开发一个抖音级的短视频？
7 月,抖音全球日活跃用户 1.5 亿,月活跃用户突破 5 亿,其活跃程度及用户粘性概括为「抖音五分钟,人间两小时」.毫无疑问抖音是 2018 年最火应用之一.抖音的火爆,不仅意味着垂直短视频可以获得 ...
最新文章
- android 底部通知,Android Fragment实现底部通知栏
- getopt的用法与optarg
- Qt界面开发（各种控件以及图表）
- Mapreduce中maptask过程详解
- java 不允许默认构造_java – 如何使用ObjectMapper去除/序列化不可变对象而不使用默认构造函数？...
- word、excel、ppt 办公文件 在线预览
- android app性能优化_Android性能优化之Apk 瘦身优化
- 总结一下这一年来的心得体会
- linux 7 network fail,CentOs7 网卡出现问题Job for network.service failed
- C#操作Win7/Win8的库、收藏夹
- Android 设置电话号码拦截(黑名单)
- 泰晤士高等教育世界大学排名（400强）—前50位
- Linux常见英文翻译
- 阿里云国际站的对象存储oss与自建存储的区别
- Android判断手机是否是小米MIUI系统
- 查看服务器型号和cpu参数等信息
- 互联网创业的准备——架构
- 玩股票的人都是接盘侠
- Oracle分析函数（每组数据取一条记录）
- 计算机网络实验--验证性实验