uniapp swiper轮播展示视频+图片

uniapp在app中在展示video时，会有样式不兼容问题，video层级很高，直接脱离了就很烦！！！！！！！！！！！！！！！！！！小程序正常展示。所以这个需求弄了很久！！！！！！！！！真烦！！！！！但好在弄出来了,但uniapp真的很鸡肋！！！！

方法如下：

1、先放一下源码组件：

<template>
	<view class="screen-swiper-box">
		<swiper @change='swiperChange' v-show='autoplay' class="screen-swiper" indicator-dots="true" circular="true"
			:autoplay="autoplayVideo" indicator-active-color="#71C1F6" indicator-color="#ffffff" interval="3000"
			duration="500">
			<swiper-item v-for="(item,index) in list" :key="index">
				<image class="swiperImage" @click="previewImage(item)" :src="item.type=='video'?item.poster:item.src"
					mode="scaleToFill"></image>
				<image v-if="item.type == 'video'" class='coverImage' @click="showVideo(item)"
					src='https:/*****-cn-***s.com/gjhz/20230601/94283177972b4a9f9d045c84367892d7.png'>
				</image>
			</swiper-item>
		</swiper>
		<u-popup v-model="showVideoBool" :uploadVideoBtn='true' negative-top="1px" @uploadVdata='uploadVdata'
			@close='close' border-radius="10" mode="center" :mask-custom-style="{background:'#000'}">
			<view v-if="showVideoBool" style='width:750rpx;height:700rpx;margin:0 auto'>
				<video :controls='true' style='width:100%;height:100%;' enable-progress-gesture='false' direction='0'
					page-gesture="true" id="myVideo" autoplay='true' @pause="ZanTing" @play="BoFang" class='isVideeo'
					objectFit="cover" :src="videoUrl">
				</video>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		uploadVideoData
	} from '@/utils/date.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return [] //[{type:'video',src:''},{type:'image',src:''}]
				},
				required: true
			}
		},
		data() {
			return {
				autoplay: true,
				showVideoBool: false,
				videoContext: null,
				autoplayVideo: true,
				changeIndex: '',
				poster: 'https://gongjihuizu.oss-cn-beijing.aliyuncs.com/gjhz/20230601/834fef3de4fd46af8582ca77d7000a9d.jpg', //视频网络封面图
				videoPicture: 'https://desk-fd.zol-img.com.cn/t_s720x360c5/g6/M00/0B/06/ChMkKmFBixKIYQSCAAJVqqciWmYAATuTwFJgJkAAlXC803.jpg',
				pictureUrl: 'https://gongjihuizu.oss-cn-beijing.aliyuncs.com/gjhz/20230601/4e0762932cd74b59bf28433f4f17e9df.jpg',
				// videoUrl: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
				videoUrl: '',
			}
		},
		onReady: function(res) {
			// this.videoContext = uni.createVideoContext('myVideo', this)

		},
		onShow() {
			// this.autoplay = false;
		},
		methods: {
			close() {
				console.log('关闭弹窗')
				this.autoplay = true;
			},
			//下载
			uploadVdata() {
				return uploadVideoData(this.videoUrl)
			},
			start() {
				console.log('start 开始滑动')
			},
			move() {
				console.log('move 正在滑动')
			},
			end() {
				console.log('end 滑动结束')

			},
			previewImage(item) {
				console.log('查看图片', item)
				if (item.type == 'image') {
					console.log('查看图片')
					uni.previewImage({
						urls: [item.src +
							'?x-oss-process=image/watermark,image_c3kucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMzA=,t_90,g_se,x_1,y_1'
						],
						current: 0,
						longPressActions: {
							itemList: ['保存图片'],
						},
						complete: (e) => {
							console.log(e, 'eeeeeeeeeeeeee')
						}
					});
				}

			},
			// 轮播图事件
			showVideo(item) {
				this.autoplay = false;
				this.showVideoBool = true
				this.videoUrl = item.src
				uni.createVideoContext('myVideo', this).play()
				// this.videoContext.play();

			},
			swiperChange(e) {
				// console.log('swiper切换', e.detail)

				this.changeIndex = e.detail.current
			},
			colseVideo() {

				// this.videoContext.pause();

				this.autoplay = false;
			},

			//视频开始播放
			BoFang() {
				console.log('2222222', '视频开始播放')
				this.autoplay = false;
				// this.videoContext.play();

			},

			// 视频暂停播放
			ZanTing(e) {
				console.log(e, '视频暂停播放')
				// this.autoplay = true;

				// this.videoContext.pause();

			}
		}
	}
</script>


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

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

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

				.videoClose {
					height: 100rpx;
					width: 100rpx;
					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%;
				z-index: 1;
			}


		}
	}

	.coverImage {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
		position: absolute;
		z-index: 5;
		left: 45%;
		top: 38%;
	}
</style>

2、组件逻辑解释：

1. 先处理一下数据，给数据数组加个type，判断一下是视频和图片。我这里的type名是video、image
2. 如果是video就展示视频的封面图，封面图的制作方式后面会说，最好在封面图加一个倒三角，这样更美观好看一些，也能一眼就看出来是个视频。
3. 当点击视频的时候，展示弹窗展示视频，video在u-popu里面是正常展示，这个视频暂停swiper的自动播放，如果没有设置自动播放，请忽略。

 效果如图

关于视频封面图制作：是后台处理的后台给了我一串字符串，我拼接在了视频链接的后面?x-oss-process=image/watermark,image_c3kucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLFBfMzA=,t_90,g_se,x_1,y_1'，上面的代码里面有，这样就生成了一张图片，但是这个图片就是一张静态图，所以为了效果更好，我在这张封面图上加了一个倒三角，就有模有样了。

有任何问题，请留言