微信小程序video播放

小程序一個頁面上不能存在多個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
    })
}
相關文章
相關標籤/搜索