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

微信小程序视频列表用到的组件是  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