微信小程序实现video列表播放

需求:实现video列表功能,播放视频前,先暂停上一个视频,再播放下一个视频。

原理:不提倡同一个页面存在多个video组件,列表只存在一个video组件,通过获取当前点击的视频id,判断是否显示video组件;列表默认用封面+播放按钮图片代替video,点点击播放按钮时,隐藏封面+播发按钮,显示video组件(设置默认播放),进行播放。

效果图:

微信小程序实现video列表播放

代码:

wxml:

  微信小程序实现video列表播放

js:

微信小程序实现video列表播放

微信小程序实现video列表播放

CSS:

微信小程序实现video列表播放