仿抖音的下滑切换视频

H:

        <van-swipe :show-indicators="false" :initial-swipe="showSlide"  @change="onChange"  vertical :loop="false" ref="vant_swipe" >
          <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
            <div class="video_container">
              <video class="video_box" width="100%" height="100%" webkit-playsinline="true" x5-playsinline x5-video-player-type="h5"  x5-video-player-fullscreen="true" playsinline="true" preload="auto" :src="item.video_url" :playOrPause="playOrPause"  x-webkit-airplay="allow"  x5-video-orientation="portrait" @click="pauseVideo" @ended="onPlayerEnded($event)" loop="loop" :style="{opacity:isopacity}"></video>
              <!-- 封面 -->
              <img v-show="isVideoShow" class="play" @click="playvideo" :src="item.video_cover" :style="{opacity:isopacity}">
              <img  v-show="iconPlayShow" class="icon_play" @click="playvideo"  src="static/images/icon_play.png">
            </div>
            <!-- 底部作品描述 -->
            <div class="production_box">
              <div class="production_name">{{item.title}}</div>
              <div class="production_des">{{item.introduction}}</div>
            </div>
          </van-swipe-item>
        </van-swipe>

D:

data() {
    let u = navigator.userAgent;
    return {
      showSlide: 0,
      allLoaded: false, //数据是否全部加载完
      page: 1,
      isLoading: true,
      option: {},
      current: 0,
      videoList: [],
      isVideoShow: true,
      playOrPause: true,
      video: null,
      iconPlayShow: true,
      isAndroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1, // android终端
      isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
      tabIndex: 0,
      showshare: false,
      videoInterval: null, //检查视频是否加载好
      videoLazy: false, //视频懒加载
      isopacity: 1,
      shareVideo: null, //点击分享的时候需要暂停的视频
      dataLoaded: false
    };
  },

M:

//滑动改变播放的视频
    onChange(index) {
      //如果已经播放第一个了就清除循环
      if (this.videoInterval) { clearInterval(this.videoInterval); }
      this.iconPlayShow = false;
      //改变的时候 暂停当前播放的视频
      let video = document.querySelectorAll("video")[this.current];
      video.pause();
      //判断案例加载到哪里了
      if (index + 1 == this.videoList.length) {
        this.page++; //当视频切换到列表的最后一个的时候请求加载下一页
        this.getData(index);
      } else {
        this.changeload(index);
      }
    },
//播放视频
    changeload(index) {
      this.playOrPause = false;
      this.current = index;
      if (this.isiOS) {
        //页面中是否存在视频懒加载
        if (this.videoLazy) {
          this.videoLazy = false;
          this.isopacity = 1;
        } else {
          this.videoLazy = true;
          this.isopacity = 0;
        }
        //ios切换直接自动播放下一个
        let vid = document.querySelectorAll("video")[this.current];
        console.log("进入changeload", vid.readyState, vid.networkState);
        //检测视频是否加载好了
        if (vid.readyState == 4) {
          this.isopacity = 1;
          this.videoLazy = false;
          vid.play();
          console.log(this.videoLazy, "懒加载");
        } else {
          this.videoInterval = setInterval(() => {
            this.myFunction(vid);
          }, 300);
        }
        this.playOrPause = true;
      } else {
        if (this.videoLazy) {
          this.videoLazy = false;
          this.isopacity = 1;
        }
        //安卓播放时重置显示封面。图标等
        this.isVideoShow = true;
        this.iconPlayShow = true;
      }
    },
//检查视频懒加载的图片是否加载好
    imageLoaded() {
      this.iconPlayShow = true;
    },
//视频播放
    playvideo() {
      let video = document.querySelectorAll("video")[this.current];
      this.isVideoShow = false;
      this.iconPlayShow = false;
      //检测视频是否加载好了
      if (video.readyState == 4 || video.networkState == 1) {
        video.play();
        this.isopacity = 1;
      } else {
        this.videoInterval = setInterval(() => {
          this.myFunction(video);
        }, 300);
      }
      window.onresize = function() {
        video.style.width = window.innerWidth + "px";
        video.style.height = window.innerHeight + "px";
      };
    },
pauseVideo() {
      clearInterval(this.videoInterval);
      //暂停\播放
      let video = document.querySelectorAll("video")[this.current];
      if (this.playOrPause) {
        video.pause();
        this.iconPlayShow = true;
        this.videoLazy = false;
      } else {
        this.videoInterval = setInterval(() => {
          this.myFunction(video);
        }, 300);
        this.iconPlayShow = false;
      }
      this.playOrPause = !this.playOrPause;
    },
onPlayerEnded(player) {
      //视频结束
      this.isVideoShow = true;
      this.current += this.current;
    },
    myFunction(video) {
      let nws = video.networkState;
      if (video.readyState == 4 || nws == 1) {
        video.play();
        if (video.readyState == 4) {
          this.iconPlayShow = false; //暂停按钮
          this.videoLazy = false; //懒加载
          this.isopacity = 1; //视频是否显示
          this.isVideoShow = false; //封面图片
          clearInterval(this.videoInterval);
        }
      } else {
        this.videoLazy = true;
        this.isopacity = 0;
      }
    }
deactivated() {
    this.showSlide = this.current;
    console.log("清除循环", "退出");
    clearInterval(this.videoInterval);
  }