关于swiper的最后一个slide是视频时， 切换控制视频播放的问题

[niming175]

BUG REPORT TEMPLATE

1、我的swiper的最后一个slide是自己封装的video;
2、在切换到video的时候，要自动播放视频；
3、我是用$ref来控制视频播放

贴上代码

<template>
  <swiper :options="swiperOptions" @slideChange="slideChange" ref="mySwiper">
    <swiper-slide v-for="(item, index) in data" :key="item.id">
      <template v-if="item.type === 'video'">
        <video-player :src="data.src" :poster="data.poster" :autoplay="false" :ref="`video${index}`" />
      </template>
      <template v-else>
        <img :src="item.src" alt="" />
      </template>
    </swiper-slide>
  </swiper>
</template>

<script>
export default {
  name: 'swiper',
  data() {
    return {
      activeIndex: 0,
      swiperOptions: {
        autoHeight: true, //enable auto height
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        noSwiping: true,
        noSwipingClass: 'swiper-no-swiping',
      },
    }
  },
  methods: {
    slideChange() {
      const { realIndex } = this.swiper

      // 当前是视频的话，关闭视频
      const thisVideo = this.$refs[`video${this.activeIndex}`]
      // 下一个是视频的话，播放视频
      const nextVideo = this.$refs[`video${realIndex}`]

      if (thisVideo && thisVideo[0]) thisVideo[0].pause()
      if (nextVideo && nextVideo[0]) nextVideo[0].play()

      this.activeIndex = realIndex
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
  },
}
</script>

现在的问题

当我从第一张，左滑，进入最后一张；
最后一张是视频，理论上会自动播放才是，
但是并没有，只有声音，视频还是处于暂停状态。

查看dom发现，其实左滑后，显示的视屏，并不是我想的那个；而是在第一张slide前多个一个跟最后一张一样的dom; 而这个dom里面的封装的控件都用不了。

Vue.js version and component version

version
vue: 2.5.17
vue-awesome-swiper: 3.1.3

另外，很抱歉我英语不好，你能用中文答复是最好不过的了。

[ChenRiliang]

你开启了 loop 模式， 那么 this.$refs[video${realIndex}] 在最后一个左滑的其实是复制的 dom，尝试直接使用 querySelectorAll 获取 video ，将其播放