小程序一个页面上不能存在多个video组件,不然会发生播放视频一直处于加载中的现象。因此换了个办法,采用未播放时展现海报image,点击时切换为video播放,确保页面上只有一个video小程序
//wxml <block wx:for="videoList" wx:key="id"> <image wx:if="{{videoId!=item.id}}" catchtap="playVideo" data-video="{{item.id}}" src="/images/video-poster.png" ></image> <video wx:else src='{{item.video}}' object-fit="cover" autoplay></video> </block> //videoId肯定播放哪一个 //autoplay确保video出现时播放 //js //播放视频,本质就是切换videoId playVideo(e){ var {video:videoId} = e.currentTarget.dataset; this.setData({ videoId }) }