微信小程序云开发入门之后台获取视频并播放-微信小程序怎么添加视频-微信小程序视频上传-即速应用

微信小程序云开发入门之后台获取视频并播放-微信小程序怎么添加视频-微信小程序视频上传

浏览量：1809 时间：2020-04-06 来源：zimkeavin

1.
注：笔者是自学小程序，自身开发经验不足，代码肯定存在不规范和不足，该博客参考一下就好
2.
完整项目代码：https://github.com/zim-keavin/wxapp-cloud-demo
3.
该教程目的是实现在云开发上存储视频，并将视频循环输出到小程序界面上，同时视频有封面，点击能播放并暂停上一个播放的视频。
4.
最终效果（图中有多个视频）：
5.
首先第一步是将你的视频，以及视频的封面上传到云开发的存储中
6.
然后复制你的存储链接，在云开发的数据库内创建集合，添加记录，并把存储链接放到记录中
7.
源代码：
viewwx:for'{{items}}'wx:keyviewclass'videoView'data-id'{{index}}'videosrc'{{item.video}}'class'video'id'my{{index}}'/videoimageclass'cover'src'{{item.cover}}'wx:if'{{show!index}}'bindtap'cover'data-id'{{index}}'/imageviewclass'time'wx:if'{{show!index}}'{{item.time}}/view/viewtextclass'text'{{item.introduce}}/textviewclass'aline'wx:if"{{indexitems.length-1}}"/view/view//pages/activityPhoto/activityPhoto.jsconstdbwx.cloud.database()const_db.commandPage({data:{items:[],//视频数据的数组show:-1,//记录正在播放的视频下标id:-1,//用于关掉上一个视频},/***从云开发后台获取数据*/onLoad:function(options){varthatthisdb.collection('commercialVideo').where({publish:_.eq(true)}).get({success(res){that.setData({items:res.data.reverse()//反转使最新数据的在最上面})}})},/***点击视频后，隐藏封面，暂停上一次点击的视频，播放点击的视频*/cover:function(e){varindexe.currentTarget.dataset.idvarid'my'+e.currentTarget.dataset.idif(this.data.show!index){//此处的show是上一个视频的下标vari'my'+this.data.showthis.videoContextwx.createVideoContext(i)//小程序的视频apithis.videoContext.pause({})//暂停上一个播放的视频}this.setData({show:index//将show更新至最新点击的视频的下标})this.videoContextwx.createVideoContext(id)this.videoContext.play({})//开始播放当前视频}})page{background-color:white;}.videoView{position:relative;margin:40rpx50rpx30rpx;}.video{width:100%;height:420rpx;border-radius:20rpx;box-shadow:2px3px10px#6b6b6b;}.cover{width:100%;height:420rpx;border-radius:20rpx;position:absolute;left:0rpx;}.text{margin-left:40rpx;margin-right:20rpx;font-size:36rpx;font-weight:650;/*font-family:NSimSun;*/}.aline{margin:0rpx50rpx;margin-top:40rpx;height:1rpx;background-color:rgba(0,0,0,0.041);}.time{position:absolute;right:30rpx;bottom:30rpx;color:white;font-size:33rpx;}8.
如果有更好的方法欢迎提出或者发个链接到评论区，共勉，谢谢！