解决Uniapp的swiper轮播图内嵌视频无法跟随和偏移问题

视频轮播问题与解决过程

        客户临时要求做视频轮播，之前的轮播图采用的是Uniapp的swiper组件+背景图形式，直接在swiper-item中添加组件video，会发生视频悬浮不跟随轮播图移动的问题，如图所示

        因此采用v-if销毁和重建视频组件，判定当前轮播类型为视频的时候，再设定v-if=true让视频组件出现，然而出现了另外的问题，视频实际播放位置偏移，视频组件的黑色背景位置正常，但视频实际在右侧播放，如图所示

        于是我添加了一个按钮控制v-if的值，发现重新销毁重建的话视频位置是正常的，但是我在代码中令v-if先为false再为true，问题还是存在，但是用按钮的话就可以，我猜测和时间有关，因此设置视频播放后一秒之后再进行重建视频组件，问题就解决了。但如此实现实在太暴力，我继续尝试播放后0.5秒重建，发现虽然视频依旧偏移，但是偏移的位置发生了变化，我再次猜测可能是轮播图移动的时候，组件的位置一直在发生变化，导致视频组件此时重建的话，视频的位置会发生偏移。

        根据猜想，我利用swiper组件的@animationfinish事件，在该事件发生之后再进行重构，轮播图此时停止移动，视频不再发生偏移，问题解决。

解决方案总结

<view class="uni-margin-wrap">
			<!-- @change事件判定当前播放的是视频还是图片，@animationfinish事件刷新视频组件，autoplay控制轮播图轮播 -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" @change="onSwiperChange" @animationfinish="reflash">
				<swiper-item v-for="(item, index) in photos" :key="index">
					<!-- 两个view通过v-if判断展示图片和视频，video另设一个v-if控制视频组件重建-->
					<view v-if="item.type==='image'" class="swiper-item"
						:style="{ backgroundImage: 'url(' + item.url + ')' }"></view>
					<view v-else class="swiper-item" :style="{ backgroundColor: 'red' }">
						<!-- 轮播到视频的时候开始播放，播放完毕继续轮播 -->
						<video :initial-time="initialTime" v-if="flag" id="myVideo" :autoplay="videoPlay"
							controls="false" object-fit="cover" :src="item.url" enable-danmu danmu-btn
							@ended="startSwiper()"></video>
					</view>
				</swiper-item>
			</swiper>
		</view>

1. 通过swiper的@change事件判定当前播放的是视频还是图片，@animationfinish事件刷新视频组件，autoplay字段控制轮播图轮播

2. 两个view通过v-if判断展示图片和视频，video另设一个v-if控制视频组件重建，轮播到视频的时候开始播放，播放完毕继续轮播

			reflash() {
				// flag控制视频组件是否展示
				if (this.photos[this.currentIndex].type === "video") {
					this.flag = true
				}
			},
			startSwiper() {
				// 视频播放结束让轮播图重新滚动
				this.autoplay = true

			},
			onSwiperChange(e) {
				let current = e.detail.current
				console.log(this.photos[current].type)
				if (this.photos[current].type === "video") {
					// 当前轮播类型是视频，轮播图停止滚动，视频自动播放开启
					this.autoplay = false
					this.videoPlay = true
				} else {
					// 不是视频，开启轮播，销毁视频组件，关闭视频播放
					this.autoplay = true
					this.flag = false
					this.videoPlay = false
				}
			}

3. 利用swiper的@change的e.detail.current判断当前播放类型，根据类型做出不同操作

4. 更新videoPlay实现自动播放

仍存在的瑕疵

由于在轮播动画结束后才会重建视频组件，因此在轮播动画过程中，会出现空白，解决方案是把视频封面作为填充