vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题

做项目的时候发现一个问题，swiper视频与图片轮播切换时在ios上切换很流畅，但是安卓手机就很卡顿，想办法解决了半天，百度了半天，好像也没人遇到，就记录下想到的一种解决方案

功能：顶部有视频和图片的轮播图切换，无自动轮播，手动滑动切换
操作：发现视频与下一张图片切换时，视频的当前画面会卡顿
解决：触发滑动事件的时候，把视频标签隐藏，换成图片进行切换

具体代码

html

<div class="mySwiper">
    <swiperref="mySwiper" style="height:9rem;" :options="swiperOptions">
      	<swiper-slide v-for="item in mySwiper1" :key="item.id">
        	<div class="videoDiv" v-if="item.type==1 && video && video.length > 0" style="height:9rem;">
	          	<video v-if="videoShow" x5-playsinline playsinline webkit-playsinline class="ou"  @click="zanting()" :src="video" id="video" style="width:100%;height: 100%;object-fit:fill;webkit-playsinline='true';playsinline='true'" :poster="videoImg"></video>
	          	<div v-if="videoShow" id="play" class="play" @click="vioplay()">
		            <img src="../assets/img/play.png" style="width:100%;height: 100%;"/>
	          	</div>
          		<img v-else :src="videoImg" style="width:100%;height: 100%;"/>
        	</div>
        	<img v-else :src="item.imageUrl" />
      	</swiper-slide>
      	<div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</div>

vue中

var _this;
export default {
  name: "page2",
  data() {
    return {
      videoShow: true,// 控制显示视频还是隐藏
      id: this.$route.query.id,
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        },
        on:{
          slideChange: function(){
            console.log('改变了，activeIndex为'+this.activeIndex);
            if(this.activeIndex==0){
              // 当切换到第一个位置时，也就是视频时，显示视频
              _this.videoShow = true;
              $(".swiper-pagination").css("display", "none");// 隐藏swiper切换的点点
            }else{
              // 当切换到不是第一个位置时，也就是图片时，隐藏视频且将视频暂停
              _this.videoShow = false;
              _this.zanting();
              $(".swiper-pagination").css("display", "");// 显示swiper切换的点点
            }
          }
        }
      },
      mySwiper1: [],
      videoImg: "",
      video: "",
    };
  },
  methods: {
    //video play
    vioplay: function() {
    	var video = document.getElementById("video");
    	video.controls = "controls";
    	video.play();
    	$(".play").css("display", "none");
    	$(".swiper-pagination").css("display", "none");
    },
    //video zanting
    zanting: function() {
    	var video = document.getElementById("video");
      	if(!video) return;
    	video.controls = null;
    	video.pause();
    	$(".play").css("display", "block");
    },
    loadData: function() {
      this.$api.post("api/dest/particulars", { id: this.id }, obj => {
        obj = obj.data;
        if (obj) {
          this.video = obj.video;
          this.videoImg = obj.videoImg;
          if(this.video && this.video.length > 0){
          	// 将视频放入轮播图列表中mySwiper1中第一位
            this.mySwiper1.push({id:-1,type:1});
          }
        }
      });
      //头部图片
      this.$api.post("api/public/banners", { type: "06", id: this.id }, obj => {
        obj = obj.data;
        if (obj.length == 0) {
          obj = [
            {
              id: 1,
              imageUrl: require("@/assets/img//onerror375x160.png")
            }
          ];
        }
        for(var o of obj){
          this.mySwiper1.push(o);
        }
      });
    }
  },
  mounted: function() {
    this.loadData();
    this.loadImg();
  },
  created() {
     _this = this;
  }
};

css

// 播放按钮的样式
.play {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

代码还有待优化，但是解决了明显卡顿的问题就先贴出来记录一下