小程序如何实现抖音视频效果？

1、wxml部分代码，主要是利用swiper 标签滑动切换，事件处理，具体参数说明可以去小程序官网文档看。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    <swiper vertical="{{true}}"current="{{current}}" circular="{{false}}" bindchange="bindchange"easing-function="default"><block wx:for="{{videoList}}" wx:key="*this" wx:for-index="i"><swiper-item><view class="swiper-item"><videobindtap="clickVideo"object-fit="cover"id="video_{{i}}"show-fullscreen-btn="{{false}}"autoplay="{{i==0 && firstRequest}}"wx:if="{{i>current-2 && current+2>i}}"loop="{{true}}" src="{{item.video_url}}" class="video-dom"></video><!-- i>current-2 && current+2>i 这个判断的作用是，加载当前视频和前面一个和后面一个视频资源，  不多加载，做到按需加载，节流-->
<!-- autoplay="{{i==0 && firstRequest}}"  首次打开的时候，第一个视频自动播放，其它的滑动的时候触发播放 --></view></swiper-item></block></swiper>

2、js 部分


Page({/*** 页面的初始数据*/data: {isPlay:true,video_id:"video_0",videoList:[],pageShow:false,current:0, // 当前滑块vertical:false,  // 滑块方向offset:0,page_index:1,firstRequest:true,isRequest:true,  // 是否正在发起请求，控制不会多次滑动出发接口请求多次问题page_count:5,isHaveData:true // 判断接口返回的还有没有数据，没有设置成false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getShortVideo();},// current 改变时会触发 change 事件bindchange(e){this.setData({current: e.detail.current})this.swiperVideo(e);if(this.data.isHaveData && e.detail.current >= this.data.videoList.length-2 && !this.data.isRequest){this.setData({page_index: this.data.page_index+1},res=>{this.setData({offset: (this.data.page_index-1) * this.data.page_count,isRequest: true,})this.getShortVideo();})}},// 点击视频暂停活播放clickVideo(e){//这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频idlet vid = e.currentTarget.id;let indexVideoContext = wx.createVideoContext(vid)if(this.data.isPlay){indexVideoContext.pause();}else{indexVideoContext.play();}this.setData({isPlay: !this.data.isPlay})},// 获取视频列表getShortVideo(){wx.cloud.callFunction({name:"short-video",data:{type:"checkList",offset: this.data.offset,page_count: this.data.page_count}}).then(res=>{console.log(res)if(this.data.page_index==1){this.setData({indexVideo:res.result.list[0]})}// 请求接口的数据和每次获取条数如果不相等，说明后面已经没有数据了 isHaveData: falseif(res.result.list.length!=this.data.page_count){this.setData({isHaveData:false})}this.setData({isRequest: false,videoList: [ ...this.data.videoList, ...res.result.list],})})},// 滑动切换视频swiperVideo(e){//这里的vid是视频的id，因为这里我是用接口传数据的，里面有视频idlet vid = `video_${e.detail.current}`;// 上个一视频idvar prev_id = this.data.video_id;// 停止山一个视频播放wx.createVideoContext(prev_id).pause();this.setData({firstRequest:false,video_id:vid,isPlay:true})// 延迟500ms，再播放本视频setTimeout(function(){wx.createVideoContext(vid).play();},500)},})

以上是主要代码部分，如有不明白的留言，相互探讨交流

（完结）

下面是我的小程序实现的效果，可以扫码看看

小程序如何实现抖音视频效果？相关推荐

微信小程序——全屏幕（抖音视频）展示
效果: 应用场景: 如类似抖音视频,视频是需要铺满屏幕的: 解决方式: https://developers.weixin.qq.com/miniprogram/dev/reference/confi ...
微信小程序（实现抖音播放效果）上下滑动全屏播放效果
最近项目要做一个类似于抖音的一个视频播放需要小程序完成在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅卡顿什么的优化不好优化然后费了好大的劲优化 ...
微信小程序实现抖音视频效果
当我们进行开发的时候可能会遇到需要实现抖音视频效果的需求,并且网上该效果的开源代码少,找到的开源代码代码量大,很难进行二次开发对此我将自己的代码进行简化,仅留下可动性高的代码模块以上是实现效果与此 ...
“小程序+直播”怎样搅动音视频技术生态？
责编 / 王宇豪策划 / LiveVideoStack 12月26日晚间,微信小程序开放了直播能力,并首先向社交.教育.医疗.政务民生.金融等五大应用场景开放.与原生App应用和基于浏览器的H5 ...
微信小程序转头条/抖音小程序的方法
很多公司都在做小程序,现在主流小程序有不少:微信小程序/头条小程序/百度小程序/支付宝小程序/QQ小程序...,很多公司为了方便开发都会采用taro或uni等开发方式,直接多端使用,但是对于小公司这些 ...
微信小程序实现类似抖音效果
背景公司有个小程序项目要求做类似抖音的效果. 由于微信小程序受video兼容性的原因,总会产生很多意想不到的关于video的兼容性bug. 为了解决视频列表太多造成的卡顿,判断页面中只有滑动到当前页 ...
爆款视频生成器小程序开发及抖音分享接入方案
一.什么是爆款视频生成器爆款视频生成器,是一款可以帮助抖音用户快速生成爆款视频的工具,可以帮助创作者提供创作灵感,支持爆款文案+热门视频+创意标题等,模板化视频加持,阻力商家流量提升及团单转化. 2 ...
微信小程序 voip-room 多人音视频对话组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 多人音视频对话.需用户授权 scope.camera.scope.record.相关接口: wx.joinVoIPChat 暂只针对国内主体 ...
微信小程序原生实现抖音的视频翻页效果
效果如下图 : 具体实现, 用scroll-view video cover-view, 滑动结束后只展示当前视频品和当前前后的两个视频, 代码就不贴了, 因为代码一大堆, 包含了一些点赞.评论.转发 ...

小程序如何实现抖音视频效果？

小程序如何实现抖音视频效果？相关推荐

最新文章

热门文章