共计 470 个字符,预计需要花费 2 分钟才能阅读完成。
小程序一个页面上不能存在多个 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})
}
正文完