微信小程序 视频列表 封面图 禁止多个视频同时播放

微信小程序视频列表用到的组件是  video    

链接  https://developers.weixin.qq.com/miniprogram/dev/component/video.html

先附上效果图(对比效果)

此为没有封面图的视频,简直丑到爆

 

 

 

此为加了封面图和自定义视频播放按钮

 

 

此为禁止多视频同时播放效果图

 

 

 大致思路就是,wx:for="{ { videoLlist }}"下三个view,一个视频video,另一个封面image(客户需求,要可以自定义封面)。
主要控制变量是playIndex,当点击封面时赋予当前点击的e.currentTarget.id,而id="{ { index }}"(index是微信wx:for自带的)。
在video加个wx:if,playIndex == index是判断条件,也就是说点击封面,对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play(),因为video渲染需要时间,无延迟的话还没渲染完play()就执行了。
其他video的wx:if=false(因为只有要播放的video渲染,而其他video不渲染,所以视频列表不会卡顿)
代码很挫,希望能帮到人

 

wxml:

<!--pages/activity/historyList/historyList.wxml-->

<view class='bg_graye' style='w
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值