如何实现Owl Carousel视频播放结束后自动切换轮播

要实现视频播放完成后再切换轮播，核心思路是禁用Owl原生固定时长自动播放，改为根据当前幻灯片内容（图片/视频）手动控制切换时机：

关键修改点 #

• 关闭Owl的autoplay配置，改为自定义触发逻辑
• 给视频绑定ended原生事件，播放结束后触发轮播切换
• 针对图片幻灯片设置默认自动切换时长（可自定义）
• 优化视频暂停/播放逻辑，避免重复绑定事件导致的内存问题

修改后的完整JavaScript代码 #

var videoSlider = $('.owl-carousel');
var autoplayTimeout; // 存储图片幻灯片的自动切换定时器

videoSlider.owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  dots: true,
  autoplay: false, // 关闭原生自动播放，改为手动控制
  items: 1
});

// 轮播切换前：暂停所有视频并清除定时器
videoSlider.on('translate.owl.carousel', function () {
  $('.owl-item .item video').each(function () {
    this.pause();
    $(this).off('ended'); // 移除重复绑定的事件
  });
  clearTimeout(autoplayTimeout);
});

// 轮播切换完成后：根据当前内容类型处理切换逻辑
videoSlider.on('translated.owl.carousel', function () {
  var activeItem = $('.owl-item.active .item');
  var video = activeItem.find('video')[0];

  if (video) {
    // 播放当前视频，并监听播放结束事件
    video.play();
    $(video).on('ended', function () {
      videoSlider.trigger('next.owl.carousel'); // 视频结束后切换下一张
    });
  } else {
    // 当前是图片幻灯片，设置默认自动切换时长（示例为3秒，可自定义）
    autoplayTimeout = setTimeout(function () {
      videoSlider.trigger('next.owl.carousel');
    }, 3000);
  }
});

// 初始化时触发一次切换完成事件，处理首张幻灯片
videoSlider.trigger('translated.owl.carousel');

额外注意事项 #

1. 移除视频标签的loop属性：HTML5视频的loop属性会让视频无限循环，永远无法触发ended事件，必须删除该属性：

<!-- 原代码 -->
<video class="video-item" muted loop>
<!-- 修改后 -->
<video class="video-item" muted>

2. 图片幻灯片的切换时长可根据需求调整setTimeout中的毫秒数
3. 若需要视频循环N次后再切换，可在ended事件中添加计数逻辑判断

原代码问题说明 #

原代码依赖Owl的autoplay: true固定时长切换，完全忽略视频播放状态。改为手动控制后，切换时机完全由内容类型决定，完美匹配需求。

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