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

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

微信小程序设置组件video视频封面_第1张图片

微信小程序的视频组件video是不带有封面的,就是如上图的黑乎乎一片。我们只能自己添加图片来设置封面。我的逻辑是在video上覆盖一张图片(图片和video大小及样式完全相等),并将视频的时间设置在右下角,方便用户知道这是视频,然后在点击该视频时隐藏掉图片,并开始播放

微信小程序设置组件video视频封面_第2张图片微信小程序设置组件video视频封面_第3张图片

 
 {{item.time}}

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

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

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

你可能感兴趣的:(微信小程序设置组件video视频封面)