项目场景：

项目场景：uni-app，h5里使用swiper实现轮播图图片加视频

---

问题描述

图片切换到视频时，视频滑动卡顿，很没体验感

滑动之后松手不会来了，卡在那，如下图；

---

原因分析：

百度一下午，swiper 与uni-swipe-action都不支持里面放video，只能另想办法，有看到一篇文章说先不显示video，分下面几步；
1、用视频第一帧代替video，再加上一个自定义的按钮；
2、当点击了自定义按钮时，video在显示，并禁止滑动；
3、当视频结束或暂停时又显示第一帧图片，video标签隐藏；

<swiper 
	class="swiper-box" 
	:circular="true"
	:autoplay="false" 
	:interval="interval" 
	:disable-touch="stopTouchMove" 
	indicator-dots="true"
	indicator-color='#c1e6f6' 
	indicator-active-color='#62c9f4'
>
	<swiper-item v-for="(item ,index) in posData.images" :key="index">
		<view class="swiper-item" v-if="posData.images.length">
			<image :src="item" class="img" mode="aspectFill"></image>
		</view>
	</swiper-item>
	<swiper-item v-if="posData.vedio">
		<video 
			v-show="!isShow"
			class="video"
			:src="posData.vedio"
			:show-center-play-btn="false" 
			:controls="controls" 
			ref="VideoContext"
			@play="playVideo()" 
			@pause="endVideo(false)"
			@ended="endVideo()">
		</video>
		<cover-view v-show="isShow && posData.posterUrl"class="cover-view">
			<view class="img-box">
				<image mode="aspectFill" class="img"  :src="posData.posterUrl"></image>
				<view class="ponstin-btn">
					<image 
						@click="plays()" 
						mode="aspectFill" 
						class="pay-img" 
						src="../../static/pay.png"
					/>
				</view>
			</view>
		</cover-view>
	</swiper-item>
</swiper>

---

完整代码：

<swiper 
	class="swiper-box" 
	:circular="true"
	:autoplay="false" 
	:interval="interval" 
	:disable-touch="stopTouchMove" 
	indicator-dots="true"
	indicator-color='#c1e6f6' 
	indicator-active-color='#62c9f4'
>
	<swiper-item v-for="(item ,index) in posData.images" :key="index">
		<view class="swiper-item" v-if="posData.images.length">
			<image :src="item" class="img" mode="aspectFill"></image>
		</view>
	</swiper-item>
	<swiper-item v-if="posData.vedio">
		<video 
		v-show="!isShow"
		class="video"
		:src="posData.vedio"
		:show-center-play-btn="false" 
		:controls="controls" 
		ref="VideoContext"
		@play="playVideo()" 
		@pause="endVideo(false)"
		@ended="endVideo()"></video>
		<cover-view v-show="isShow && posData.posterUrl"class="cover-view">
			<view class="img-box">
				<image mode="aspectFill" class="img"  :src="posData.posterUrl"></image>
				 <view class="ponstin-btn">
					<image @click="plays()" mode="aspectFill" class="pay-img" src="../../static/pay.png"></image>
				</view>
			</view>
		</cover-view>
	</swiper-item>
</swiper>
<script>
	export default {
		data() {
			return {
				controls: false,
				isShow: true,
				stopTouchMove: false,
			}
		},
		methods：{
			plays() {
				this.controls = true
				this.isShow = false
				this.stopTouchMove = true
				this.$refs.VideoContext.play()
			},
			//video播放时，隐藏覆盖层，不能滑动，不能轮播
			playVideo() {
				this.isShow = false
				this.stopTouchMove = true
				this.autoplay = false
			},
			endVideo() {
				this.controls = false
				this.isShow = true
				this.stopTouchMove = false
				this.autoplay = true
			}
		}
	},
<script>

效果图，因为上传不了视频只能放图片了