vue中使用swiper4 视频轮播，点击切换关闭上一个视频的声音

vue中使用swiper4 视频轮播，点击切换关闭上一个视频的声音

直接上代码 ：给video动态绑定id

        <swiper class="swiper-container" :options="videoSwiperOption">
                  <swiper-slide
                    class="swiper-item"
                    v-for="(item,index) in videoListData"
                    :key="item.id"
                    style="text-align: center"
                  >
                    <p class="fd" style="line-height: 30px;font-size:18px;">{{item.name}}                     </p>
                    <video controls class="videoName" :id="'my_player'+index">
                      <source :src="item.url" type="video/mp4" />
                    </video>
                  </swiper-slide>
                  <div class="swiper-button-prev" slot="button-prev">
                  </div>
                  <div class="swiper-button-next" slot="button-next">
                  </div>
        </swiper>

data中 ：在点击事件中循环停止video

	videoSwiperOption: {
        effect: "flip",
        grabCursor: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on: {
          click: () => {
            if (this.videoListData.length > 0) {
              this.videoListData.forEach((item, index) => {
                document.getElementById("my_player" + index).pause();
              });
            }
          }
        }
      }