微信小程序云开发入门之后台获取视频并播放

注：笔者是自学小程序，自身开发经验不足，代码肯定存在不规范和不足，该博客参考一下就好

完整项目代码：https://github.com/zim-keavin/wxapp-cloud-demo

该教程目的是实现在云开发上存储视频，并将视频循环输出到小程序界面上，同时视频有封面，点击能播放并暂停上一个播放的视频。

最终效果（图中有多个视频）：

首先第一步是将你的视频，以及视频的封面上传到云开发的存储中

然后复制你的存储链接，在云开发的数据库内创建集合，添加记录，并把存储链接放到记录中

注意注意！pulish属性是boolean类型！不是String！

要将集合的权限设置为所有用户可读，不然可能获取不到数据！

源代码：

<view wx:for='{{items}}' wx:key><view class='videoView' data-id='{{index}}'><video src='{{item.video}}' class='video' id='my{{index}}'></video><image class='cover' src='{{item.cover}}' wx:if='{{show!=index}}' bindtap='cover' data-id='{{index}}'></image><view class='time' wx:if='{{show!=index}}'>{{item.time}}</view></view><text class='text'>{{item.introduce}}</text><view class='aline' wx:if="{{index<items.length-1}}"></view>
</view>

// pages/activityPhoto/activityPhoto.js
const db = wx.cloud.database()
const _ = db.command
Page({data: {items: [],  // 视频数据的数组show: -1,  // 记录正在播放的视频下标id: -1,  // 用于关掉上一个视频},/*** 从云开发后台获取数据*/onLoad: function(options) {var that = thisdb.collection('commercialVideo').where({publish: _.eq(true)}).get({success(res) {that.setData({items: res.data.reverse()  // 反转使最新数据的在最上面})}})},/*** 点击视频后，隐藏封面，暂停上一次点击的视频，播放点击的视频*/cover: function(e) {var index = e.currentTarget.dataset.idvar id = 'my' + e.currentTarget.dataset.idif (this.data.show != index) {  // 此处的show是上一个视频的下标var i = 'my' + this.data.showthis.videoContext = wx.createVideoContext(i)  // 小程序的视频apithis.videoContext.pause({})  // 暂停上一个播放的视频}this.setData({show: index  // 将show更新至最新点击的视频的下标})this.videoContext = wx.createVideoContext(id)this.videoContext.play({})  // 开始播放当前视频}
})

page {background-color: white;
}.videoView {position: relative;margin: 40rpx 50rpx 30rpx;
}.video {width: 100%;height: 420rpx;border-radius: 20rpx;box-shadow: 2px 3px 10px #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: 0rpx 50rpx;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;
}

如果有更好的方法欢迎提出或者发个链接到评论区，共勉，谢谢！

微信小程序云开发入门之后台获取视频并播放相关推荐

微信小程序云开发入门(图文详解)
以下内容是我第一次微信小程序云开发的一次记录,从真正的0基础入门,到基本掌握一些内容. 其中遇到的一些问题,和根据网上的一些资料,整理出来真正可用的,实测可行的源代码. 以下放出我的github源码 ...
微信小程序云开发入门（二）-数据库详解
微信小程序云开发入门(二)-数据库详解接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...
微信小程序云开发入门（一）
微信小程序云开发入门(一) 摘要:微信小程序云开发是包含了服务器以及数据库的运行环境,而且只需要开发者进行简单的管理,关键是不用服务器进行权限验证,步骤简单不少,非常适合个人开发者和创业者使用.虽然云 ...
微信小程序云开发入门-快速获取手机号
一.前言很多时候,我们需要获取用户的手机号码,一般是由用户自己输入,然后我们需要保证手机号的准确性比较高的话,可能还需要搭配一个验证码的功能来确保一定的准确性.这样实现起来的开发成本以及用户体验感都 ...
❤️微信小程序云开发教程合集（视频+图文）免费❤️
一.视频版微信小程序云开发视频教程上线啦二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
微信小程序云开发入门实践
云开发介绍什么是云开发 2017年微信小程序发布后,一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要 ...
微信小程序云开发入门-数据库插入数据（包含批量）
一.前言文章将介绍如何在微信小程序云开发中向云开发数据库插入数据(单条或批量). 写法有好几种,文章将会一一进行对比,看看每种写法之间有何优缺点,如何让代码看起来更优雅. 为了更加贴合实际的开发逻辑 ...
微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...

微信小程序云开发入门之后台获取视频并播放

微信小程序云开发入门之后台获取视频并播放相关推荐

最新文章

热门文章