小程序一个页面上不能存在多个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
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。