<swiper ref="mySwiper" :options="swiperOption" v-if="bannerList.length" @slideChangeTransitionEnd="stopOther"> 
　　<swiper-slide v-for="(si, sidx) in bannerList" :key="'plant_banner' + sidx"> 　　 
　　　　<VVideo :src="si.pic" :poster="si.pic_cover" :class="`bannerVideo${sidx}`" :ref="`bannerVideo${sidx}`" :videoPlayer="'bannerVideo'+sidx" @stopOther="stopOther"></VVideo> 　
　  </swiper-slide> 　　
    <div class="swiper-pagination" slot="pagination"></div> 
</swiper>

beforeRouteLeave(to, from, next) {

    this.stopOther();

    next();

},

methods: {

     // 暂停其他视频

    stopOther(v) {

      const refs = this.$refs;

      let refsList = Object.keys(refs);

      refsList.forEach((item) => {

        console.log(item);

        const videoDom = document.querySelector(`.${item}>video`);

        if (!videoDom || item == v) return;

        this.$refs[item][0].playState = false;

        this.$refs[item][0].controls = false;

        videoDom.pause && videoDom.pause();

      });

    },

}

<template>

  <div class="v-video"

    <video :ref="videoPlayer" class="video" :class="videoPlayer" :src="src"  webkit-playsinline="true" playsinline="true" controlsList="nodownload"  @click="togglePlay()">

      <source :src="src" type="video/mp4" />

      您的浏览器不支持 video 视屏播放。

    </video>

    <img class="video__poster" v-if="!playState" :src="poster" alt="" @click="togglePlay()">

    <img v-if="!playState" class="video__btn" src="../common/images/play_pause.png" alt="" @click="togglePlay()" />

  </div>

</template>

<script>

export default {

  props: {

    src: {

      //视频链接

      type: String,

      default: "",

    },

    poster: {

      //海报链接

      type: String,

      default: "",

    },

    videoPlayer: {

      type: String,

      default: "",

    },

  },

  data() {

    return {

      playState: false, //是否显示暂停按钮

    };

  },

  mounted() {},

  computed: {},

  methods: {

    togglePlay() {

      console.log("this.videoPlayer", this.videoPlayer);

      this.$emit("stopOther", this.videoPlayer);

      this.$nextTick(() => {

        let videoDom = this.videoPlayer && this.$refs[this.videoPlayer];

        if (!videoDom) return;

        if (!this.playState) {

          videoDom && videoDom.play();this.playState = true;

        } else {

          videoDom && videoDom.pause();this.playState = false;

        }

        videoDom.onended = () => {

          this.playState = false;

        }

      });

    },

  },

};

</script>

<style lang="stylus" scoped>

.v-video {

  width: 100%;

  height: 100%;

  position: relative;

  >video {

    width: 100%;

    height: 100%;

  }

  .video__poster {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    left: 0;

    top: 0;

    z-index: 5;

  }

  .video__btn {

    width: 2.6rem;

    height: 2.6rem;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: - 1.3rem;

    margin-top: -1.3rem;

    z-index: 10;

  }

}

</style>