小程序一個頁面上不能存在多個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 }) }