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

微信小程序设置组件video视频封面相关推荐

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案
效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用 ...
微信小程序使用腾讯视频插件-uniapp-详细篇（2022.1.27）
微信小程序使用腾讯视频插件-uniapp篇(无需资质审核包过) 1.添加插件:微信小程序平台-设置-第三方设置-添加插件-搜索:腾讯视频 2.在uniapp-manifest.json中-源码视图,添 ...
微信小程序之组件 —— 微信小程序教程系列（19）
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
微信小程序常用组件分享
工作中经常会用到如下,分享一下,方便以后复制粘贴,懒得重复造轮子官方小程序示例 2022-11-30 微信小程序横屏 2022-11-29 微信小程序内嵌h5 three.js 2021-10-27 ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序导航：免费视频+精品教程+DEMO集合（长期更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...

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

微信小程序设置组件video视频封面相关推荐

最新文章

热门文章