如何实现Bootstrap 4视频幻灯片播放时暂停轮播、结束后自动恢复？

Bootstrap 4 轮播组件完成初始化后，无法通过再次传入配置参数的方式修改运行状态，必须调用官方提供的公开方法控制启停，这是代码无法恢复自动轮播的核心原因。

完整实现代码如下：

// DOM加载完成后执行逻辑
$(function() {
  // 视频播放时暂停轮播
  $('#myVideo').on('play', function () {
    $('#myCarousel').carousel('pause');
  });

  // 视频暂停、播放结束时恢复自动轮播
  $('#myVideo').on('pause ended', function () {
    // 配置轮播切换间隔，单位为毫秒，可按需调整
    $('#myCarousel').data('bs.carousel')._config.interval = 1000;
    // 调用cycle方法启动自动轮播
    $('#myCarousel').carousel('cycle');
  });

  // 监听轮播切换事件，切回首个幻灯片时自动重新播放视频
  $('#myCarousel').on('slid.bs.carousel', function (e) {
    // 首个幻灯片索引为0，判断当前激活项是否为首个
    if (e.to === 0) {
      const videoEle = $('#myVideo')[0];
      // 重置视频播放进度到开头
      videoEle.currentTime = 0;
      // 触发视频播放
      videoEle.play();
    }
  });
});

注意事项 #

• 轮播根标签的data-ride="carousel"属性无需删除，保留即可正常初始化自动轮播逻辑。
• 建议保留video标签的muted属性，符合浏览器自动播放策略要求，避免视频播放被拦截导致逻辑失效。
• 如需调整轮播自动切换的时间间隔，修改代码中interval = 1000的数值即可。

内容的提问来源于stack exchange，提问作者Simon