swiper组件和video组件联用怎么实现

swiper轮播组件和video组件联用导致双方组件都会出问题，
解决方案：
               1.为swiper和video各写一个事件。
               2.将swiper和video标签分开（将video装进modal框中，实现组件和标签的分离，互相不影响，再加上播放视频，轮播停止。关闭视频，轮播继续轮播的事件）



HTML：

    <!-- 视频的弹窗 -->
   <b-modal
     ref="videoModal"
     :hide-header="true"
     :hide-footer="true"
     @shown="initVideo"
     @hidden="videoStop"
     body-bg-variant="dark"
     size="xl"
   >
     <div class="video-box">
       <div class="video-stop" @click="closeVideo">x</div>
       <video id="videoTag" :autoplay="false" controls="controls"></video>
     </div>
   </b-modal>

视频轮播，

 <div class="swiper-diving animated fadeInUp">
      <div class="swiper-diving-con" v-if="video[0]">
        <swiper :options="swiperOptionDiving" ref="mySwiper">
          <swiper-slide v-for="slide in video" :key="slide.id">
            <img :src="slide.thum" />
            <div class="video-btn" @click="paly(slide)">
              <more>
                <span slot="more">观看视频</span>
              </more>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="swiper-pagination-diving"></div>
      <div class="swiper-button-next-diving"></div>
      <div class="swiper-button-prev-diving"></div>
    </div>

图片：1569720393(1).jpg

JS部分 // 播放视频    
paly(video) {      this.videoContent = video;    
 this.$refs["videoModal"].show();    },  
  //关闭视频的按钮    
closeVideo() {           console.log(this.swiperOptionDiving);  
   this.$refs["videoModal"].hide();  
    this.$refs['mySwiper'].swiper.autoplay.start();
   },    //初始化视频  
 initVideo() {      var videoTag = document.querySelector("#videoTag");    
            videoTag.setAttribute("src", this.videoContent.video);  
   videoTag.setAttribute("poster", this.videoContent.thum);  
   console.log(this.$refs['mySwiper'])  
   this.$refs['mySwiper'].swiper.autoplay.stop();  
 },
//因为用的是vue写的，所以用的时候注意引入组
件库。

楼主有代码嘛