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

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

浏览量:672 时间: 来源:zimkeavin

微信小程序的视频组件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来播放当前视频,不然只是隐藏封面,视频仍需点击播放

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎