swiper中视频切换到图片卡顿

是这样的，我需要做一个带视频的那种轮播（模仿淘宝或者京东的商品轮播）那样的，直接把swiper里面放入video标签后，发现在video和image标签之间切换的时候，卡顿，但是图片与图片之间切换很顺畅，我的项目中第一个是视频，故里面做个判断，请大佬帮助，或者重新设计一下该怎么才能做到像淘宝或者京东那样，播放视频还能无缝切换下一张图

  <swiper :style="{height:height+'rpx'}" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" @change="swiperchange">  
            <swiper-item class="swiperitem" v-for="(item,index) in media" :key="index" v-if="media[0].type == 2">  
                <video id="myVideo" v-if="index == 0" class="videoplay" @touchstart="slidestart"  
                       :src="media[0].url"  
                       :controls="controls"  
                       :loop="false"  
                       :show-center-play-btn="true"  
                       :enable-play-gesture="true"  
                       :enable-progress-gesture="true"  
                       :show-fullscreen-btn="true"  
                       :show-play-btn="true"  
                       play-btn-position="center"  
                       :muted="false"  
                       direction="0"  
                       object-fit="contain"  
                       @play="play"  
                       :autoplay="autoplay"></video>  
                <image v-if="index!=0" crossorigin="anonymous" id="myimg"  class="img" @tap="previewImage(index)" :src="item.url" mode="aspectFit"></image>  
            </swiper-item>  
            <swiper-item  v-if="media[0].type != 2" class="swiperitem" v-for="(item,index) in media" :key="index">  
                <image crossorigin="anonymous"  class="img" @tap="previewImage(index)" :src="item.url" mode="aspectFit"></image>  
            </swiper-item>  
</swiper>

我补充一个故障现象的图吧