微信小程序解决多个视频播放的问题
本例子:是图片和多个视频混在一起
-
html
<view class="case-ul"> <repeat for="{ { list}}" index="index" item="item" key="key"> <view class="case-li case-view-item"> <image hidden="{ { item.isPlaying}}" style="" class="case-picture" src="{ { item.path_url}}" mode="scaleToFill"></image> <!-- 是视频 --> <video wx:if="{ { item.isPlaying}}" id="video-{ { index}}" class="video" src="{ { item.video_url}}" controls></video> <image wx:if="{ { item.type==1}}" hidden="{ { item.isPlaying}}" class="bt" mode="scaleToFill" @tap="playVideo({ { item}},{ { index}})" src="./images/play-bt.png"></image> <!--前提一个播放的按钮--> </view> </repeat> </view>
- list是一个数组
- type 后台给我一个标识,0:图片 。 1:视频
- isPlaying 前台自己添加是否播放视频
- js
playVideo(item, index) { this.list.forEach(n => { n.isPlaying = false; }) this.list[index].isPlaying = true; let videoContext = wx.createVideoContext(`video-${ index}`) videoContext.play() },
上一篇:
uniapp开发微信小程序-2.页面制作