微信小程序里面同一页面中有多个视频,但是只能播放一个视频
时间: 2024-09-18 14:16:03 浏览: 63
在微信小程序中,如果你想要在同一页面显示并控制多个视频的播放,通常可以采用嵌套swiper或者其他滚动容器来实现。每个视频会被包裹在一个独立的`video`标签中,并且需要设置唯一的`id`或`wx:for-item`来区分。微信小程序的`wx:if`或`v-if`指令可以帮助你动态控制视频的显示隐藏。
例如:
```html
<view wx:for="{{ videos }}">
<video id="video{{index}}" wx:if="{{ playing === index }}">
<source src="{{ item.url }}" type="video/mp4">
</video>
</view>
<button bindtap="changeVideo">切换视频</button>
<script>
Page({
data: {
videos: [{url: 'video1.mp4'}, {url: 'video2.mp4'}],
playing: 0,
},
changeVideo: function() {
this.setData({
playing: (this.data.playing + 1) % this.data.videos.length // 循环切换
});
}
})
</script>
```
在这个例子中,当点击按钮时,会改变`playing`的数据值,使得当前显示的`video`元素切换到下一个。每个`video`标签只有在对应的索引等于`playing`的时候才会播放。
阅读全文