幻灯片上的暂停视频

Question

当我通过拖动或使用幻灯片下一步prev按钮滑行时，我想暂停视频。哪个滑块不重要。它可以是有用的-斯威斯特或猫头鹰-旋转木马

我用的是ngx-有用的-酒杯作为我的旋转木马。我可以使用anyone 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);
      },
    },
  };

Answer 1

如果您只想在单击下一个或前一个按钮时暂停视频，则可以为这些按钮添加一个侦听器，然后在该监听器中暂停视频。

下面的例子显示了在按钮中添加一个ID，然后使用这个ID在Javascript中找到按钮并添加一个侦听器。

你也可以添加一个简历按钮，也可以让用户点击视频播放。

 <button id="btnNext" class="btn p-0 btn-prev" (click)="previousSlide()">

var vid1 = document.getElementById("YourVideoID");
var btnNext = document.getElementById("NextButton");
var btnPrev = document.getElementById("PrevButton");
var btnResume = document.getElementById("PrevButton");

btnNext.addEventListener("click", function() {
     vid1.pause()
});

btnPrev.addEventListener("click", function() {
     vid1.pause()
});

btnResume.addEventListener("click", function() {
     vid1.play()
});