暂停和启动带有视频的幻灯片的 Bootstrap 4 轮播

Posted 2023-03-21

【中文标题】暂停和启动带有视频的幻灯片的 Bootstrap 4 轮播

【英文标题】：Pausing and starting Bootstrap 4 carousel for slide with video

【发布时间】：2021-12-16 06:36:45

【问题描述】：

阅读了许多关于此的主题后，我找不到解决方案。有人可以提供一些指导吗？

标准 Bootstrap 4 轮播。我正在尝试在视频播放期间暂停第一张幻灯片，然后恢复标准轮播操作。

    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
          <div class="carousel-item active">
              <video id="myVideo" class="video-fluid" autoplay muted>
                <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
              </video>
          </div>
          <div class="carousel-item" style="background-image:url(https://via.placeholder.com/1600x400?text=Slide+2); background-position: center center;">&nbsp;</div>
          <div class="carousel-item" style="background-image:url(https://via.placeholder.com/1600x400?text=Slide+3); background-position: center center;">&nbsp;</div>
      </div>

      <a class="carousel-control-prev" role="button" data-slide="prev" href="#myCarousel">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" role="button" data-slide="next" href="#myCarousel">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>

  </div>

以下是 - 理论上 - 停止和启动轮播。

 // Stop/start carousel when video playing
    $('#myVideo').on('play', function (e) 
        $('#myCarousel').carousel(
            pause: true,
            interval: false
            );
        );
    $('#myVideo').on('stop pause ended', function (e) 
        $("#myCarousel").carousel(
            cycle: true,
            interval: 1000,
            );
        );

我的问题是我无法让它可靠地工作。仅使用 pause: true 似乎并不能停止轮播。我发现我必须使用pause: true 和interval: false。然后我发现我无法在“停止暂停结束”部分使用cycle: true 和interval: 1000 恢复轮播。

但是我可以使用$("#myCarousel").carousel('next'); 前进到下一张幻灯片 - 但这并没有任何好处，因为它只会向前移动一张，它不会恢复轮播。

我知道我可以通过删除 data-ride 来停止轮播，但这会永久停止，我想要实现的只是让轮播在第一张幻灯片中的视频期间暂停。

除此之外，我还不清楚下一次用户循环到轮播中的第一张幻灯片时如何重新开始播放视频。

非常感谢。

【参考方案1】：

我设法用以下 JS 解决了这个问题：

$(document).ready(function () 
    var slider = $('#myCarousel').carousel(
        interval: 5000
    );
    $('#myVideo').on('play', function (e) 
        slider.carousel('pause');
    );
    $('#myVideo').on('stop pause ended', function (e) 
        slider.carousel( 'pause': false );
        slider.carousel('next');
    );
);
$('#myCarousel').bind('slid.bs.carousel', function () 
    var currentIndex = $('div.active').index() + 1;
    if (currentIndex == 1) 
        $('#myVideo').get(0).play()
    
);

这看起来有点乱，但确实有效：

默认 5 秒轮播间隔 轮播在视频期间暂停 视频结束后轮播会自动恢复 当轮播再次移动到第一张幻灯片时，视频播放再次开始播放

我从来没有考虑过各种各样的问题；例如，如果您不想播放视频但使用 控件，则默认的 5 秒间隔不起作用，因为视频仍在后台播放。所以我猜为了完整性，控件也应该触发 slider.carousel( 'pause': false );和slider.carousel('next');。