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

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

完整项目代码：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 = this
    db.collection('commercialVideo').where({
      publish: _.eq(true)
    }).get({
      success(res) {
        that.setData({
          items: res.data.reverse()  // 反转使最新数据的在最上面
        })
      }
    })
  },

  /**
   * 点击视频后，隐藏封面，暂停上一次点击的视频，播放点击的视频
   */
  cover: function(e) {
    var index = e.currentTarget.dataset.id
    var id = 'my' + e.currentTarget.dataset.id
    if (this.data.show != index) {  // 此处的show是上一个视频的下标
      var i = 'my' + this.data.show
      this.videoContext = wx.createVideoContext(i)  // 小程序的视频api
      this.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;
}

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