Question

我想通过拖动或使用下一个，上一个幻灯片按钮来滑动视频。哪个滑块都没关系。它可以是有用的雨刷器或猫头鹰旋转木马

我正在使用ngx-useful-swiper作为轮播。我可以改用ngx-owl-carousel-o，但是如果它可以与任何人一起使用 我的HTML

<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()
});

暂停幻灯片上的视频

1 个答案: