微信小程序设置组件video视频封面

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

微信小程序的视频组件video是不带有封面的，就是如上图的黑乎乎一片。我们只能自己添加图片来设置封面。我的逻辑是在video上覆盖一张图片（图片和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>

  关键代码是上面这块，wx:if='{{show!=index}}' show是记录你点击的视频的id，index是视频的id，意思就是如果你点击的视频和某视频id相等时，隐藏掉封面，否则显示回来。这样就可以在点击时隐藏，点击下一个视频时恢复上一个视频的封面了。

 this.videoContext = wx.createVideoContext(id)
 this.videoContext.play({})  // 开始播放当前视频

 另因为点击封面后调用的 “cover” 函数，除了隐藏封面外，还需要调用上面的小程序的视频的api来播放当前视频，不然只是隐藏封面，视频仍需点击播放