html - スライドでビデオを一時停止

Question

ドラッグまたはスライドの次、前のボタンを使用してスライドするときにビデオを一時停止したい。どのスライダーでも構いません。便利なスワイパーまたはフクロウのカルーセルになることができます

カルーセルとして ngx-useful-swiper を使用しています。代わりに ngx-owl-carousel-o を使用でき ます。

<swiper [config]="heroSlider" #usefulSwiper>
              <div class="swiper-wrapper">
                <div class="swiper-slide text-center" *ngFor="let item of sections.about_video; index as i">
                  <video
                    poster="{{ fileUrl + item.thumbnail }}"
                    playsinline
                    autoplay="false"
                    muted
                    controls="false"
                    onloadedmetadata="this.muted = true"
                    src="{{ fileUrl + item.video }}"
                    id="video"
                    #video
                  ></video>
                </div>
              </div>
              <button class="btn p-0 btn-prev" (click)="previousSlide()">
                <svg
                  version="1.1"
                  id="Layer_1"
                  x="0px"
                  y="0px"
                  viewBox="0 0 26 43"
                  style="enable-background: new 0 0 26 43"
                  xml:space="preserve"
                >
                  <path
                    id="Path_3540"
                    class="st0"
                    d="M21.5,43c2.5,0,4.5-2,4.5-4.5c0-1.2-0.5-2.4-1.3-3.2L10.9,21.5L24.7,7.7
                                                    c1.7-1.8,1.7-4.7-0.1-6.4c-1.8-1.7-4.5-1.7-6.3,0l-16.9,17c-1.8,1.8-1.8,4.6,0,6.4l16.9,17C19.1,42.5,20.3,43,21.5,43z"
                  />
                </svg>
              </button>
              <button class="btn p-0 btn-next" (click)="nextSlide()">
                <svg
                  class="icon"
                  version="1.1"
                  id="Layer_1"
                  x="0px"
                  y="0px"
                  viewBox="0 0 26 43"
                  style="enable-background: new 0 0 26 43"
                  xml:space="preserve"
                >
                  <path
                    id="Path_3539"
                    class="st0"
                    d="M4.5,43C2,43,0,41,0,38.5c0-1.2,0.5-2.4,1.3-3.2l13.7-13.8L1.3,7.7c-1.7-1.8-1.7-4.7,0.1-6.4c1.8-1.7,4.5-1.7,6.3,0l16.9,17c1.8,1.8,1.8,4.6,0,6.4l-16.9,17C6.9,42.5,5.7,43,4.5,43z"
                  />
                </svg>
              </button>
</swiper>

私のTS

heroSlider: SwiperOptions = {
    loop: false,
    slidesPerView: 1,
    on: {
      transitionEnd: function (Swiper) {
        console.log(Swiper);
      },
    },
  };