uniapp：轮播里如何加入视频

template代码

主要使用uniapp swiper 根据后端传递type判断是图片，还是视屏

<view class="screen-swiper">
		<swiper style="height: 900rpx;" @change="change" class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay">
			<swiper-item style="width: 750rpx;height: 900rpx;" @click="PlayVideo(item)" v-for="(item, index) in videoList" :key="item.id">
				<image style="width: 750rpx;height: 900rpx;" v-if="!item.isPlay" :src="item.src" mode="aspectFill"></image>	
				<video style="width: 750rpx;height: 900rpx;" v-else id="myVideo" :src="item.vide" :autoplay="true" :enable-progress-gesture="false" loop muted show-play-btn controls objectFit="cover" @pause="suspend" @ended="suspend"></video>
			</swiper-item>
			<swiper-item style="width: 750rpx;height: 900rpx;" v-for="(item, index) in imageList" :key="item.id"><image style="width: 750rpx;height: 900rpx;" :src="item.src" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>  

script内代码

data代码

autoplay: false,
list: [
	{
	id: '',
	isPlay: false,
	type: 1,
	src: ''
	}
]

computed代码

videoList() {
	return this.list.filter(item => {
		return item.type == 2;
	});
},
imageList() {
	return this.list.filter(item => {
		return item.type == 1;
	});
}

onReady代码

this.videoContext = uni.createVideoContext('myVideo');

methods 代码

change(e) {
	if (e.detail.current != 0) {
		this.list[0].isPlay = false;
		that.autoplay = false;
		if(this.list[0].type==2)
		that.videoContext.pause();
	}
},
PlayVideo(item) {
	if (item.isPlay == false) {
		item.isPlay = true;
		that.videoContext.play();
		that.autoplay = true;
	} else {
		item.isPlay = false;
		that.autoplay = false;
		that.videoContext.pause();
	}
},
suspend(i) {
	if (that.autoplay == true) {
		that.autoplay = false;
	}
}

css代码 根据自己的方式调

.screen-swiper {
	min-height: 675upx;
}

.screen-swiper {
	width: 750rpx;
}

---

欢迎点赞收藏

---