vue - video视频播放完后重置播放，离开页面暂停所有视频，轮播切换后暂停播放所有视频

描述：基于vue-awesome-swiper的多视频处理

    slideChangeTransitionEnd：轮播切换时暂停播放

父组件

<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>