uniapp实现swiper包含video的轮播图

具体需求：
1.轮播图轮播功能。
2.同时存在视频video和图片image。
3.视频不点击播放时不播放，轮播图轮播；视频播放时轮播图不轮播，视频暂停时轮播图轮播。

代码如下：

<template>
	<view class="content">
		<view class="screen-swiper-box">
			<swiper class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"
				interval="3500" duration="500">
				<swiper-item >
					<video id="myVideo" :src="videoSrc" @play="BoFang()" @pause="ZanTing()" controls></video>
				</swiper-item>
				<swiper-item >
					<image class="swiperImage" :src="imageSrc" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: false,
				videoSrc: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
				imageSrc: 'https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg'
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			BoFang() {
				if (this.autoplay == false) {
					this.autoplay = true;
				}
			},
			ZanTing() {
				if (this.autoplay == true) {
					this.autoplay = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		position: absolute;
		
	}
	.content {
		width: 100%;
		height: 100%;
		
		.screen-swiper-box {
			position: relative;
			min-height: 375upx;
			width: 100%;
			.screen-swiper {
				
				width: 100%;
				position: absolute;
				height: 100%;
				.swiperImage {
					width: 100%;
					position: absolute;
					height: 100%;
				}
				#myVideo {
					width: 100%;
					position: absolute;
					height: 100%;
				}
			}
		}
	}
</style>

个人测试很成功！

成功个der儿。后来在编码过程中发现这种既有视频又有图片的轮播图只会在H5等环境下能实现的很好，在手机app会出现会各种各样的问题。在一番百度后也发现手机app上确实不能实现video嵌套在swiper里，因为video的层级是非常高的，就算是把其他组件的z-index调到“一刀99999999”也无济于事，所以就考虑换一种实现形式，如果只要在H5页面上实现就不用再考虑其它问题了，如果想要在app上实现类似功能请往下看。

代码如下：

<template>
	<view class="screen-swiper-box">
		<swiper :hidden="autoplay" class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"
			indicator-active-color="#71C1F6" indicator-color="#ffffff" interval="3000" duration="500">
			<swiper-item>
				<image class="swiperImage" :src="pictureUrl" mode="scaleToFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperImage" :src="videoPicture" @click="showVideo" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<view :hidden="!autoplay" class="video">
			<video class="MyVideo" id="myVideo" :src="videoUrl" objectFit="cover" @play="BoFang()" @pause="ZanTing()"
				controls="true">
				<cover-image class="videoClose" @click="colseVideo()"
					src="https://i-1-lanrentuku.qqxzb-img.com/2020/11/20/7ab68fc9-e126-47da-bcf2-7dd7a3b9f540.jpg?imageView2/2/w/1024/">
				</cover-image>
				<!-- 添加一个覆盖在视频上的关闭按钮cover-image -->
			</video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoplay: false,
				videoPicture: 'https://desk-fd.zol-img.com.cn/t_s720x360c5/g6/M00/0B/06/ChMkKmFBixKIYQSCAAJVqqciWmYAATuTwFJgJkAAlXC803.jpg',
				pictureUrl: 'https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg',
				videoUrl: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			// 轮播图事件
			showVideo() {
				this.autoplay = true;
				this.videoContext.play();
			},
			colseVideo() {

				this.videoContext.pause();

				this.autoplay = false;
			},
			BoFang() {
				this.videoContext.play();
			},
			ZanTing() {
				this.videoContext.pause();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.screen-swiper-box {
		position: absolute;
		width: 100%;
		height: 350rpx;
		.video {
			height: 100%;
			width: 100%;
			position: absolute;

			.MyVideo {
				width: 100%;
				position: absolute;
				height: 100%;

				.videoClose {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: -1rpx;
					z-index: 99999;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}


		}

		.screen-swiper {

			width: 100%;
			position: absolute;
			height: 100%;

			.swiperImage {
				width: 100%;
				position: absolute;
				height: 100%;
			}


		}
	}
</style>

算是成功实现吧（汗）