Bootstrap轮播：视频播放完毕后切换下一张失效问题求助

你的问题根源在于所有视频元素都使用了同一个id="video"——HTML里id必须是唯一的，document.getElementById('video')只能获取到DOM中第一个匹配的视频元素，后面的视频根本没有绑定ended事件，所以播放完不会触发切换。

下面是具体的修复步骤和完整代码：

第一步：修改PHP生成的视频元素 #

把视频的id改成class（比如carousel-video），保证每个元素的标识唯一：

<!-- 原来的视频标签 -->
<video class="d-block w-100" src="<?php echo $_media->file_url; ?>" muted autoplay="autoplay" preload="auto" id="video"/>

<!-- 修改后 -->
<video class="carousel-video d-block w-100" src="<?php echo $_media->file_url; ?>" muted autoplay preload="auto"></video>

第二步：重构JavaScript逻辑 #

我们需要给所有视频绑定ended事件，同时处理轮播切换时的视频/图片播放逻辑（比如切换到视频时自动播放，图片可设置自动切换）：

$(document).ready(function() {
  const $carousel = $("#mediaCarousel");
  
  // 初始化轮播，默认禁用自动切换
  $carousel.carousel({ interval: false });

  // 给所有视频绑定「播放结束」事件，触发轮播下一张
  $(".carousel-video").on("ended", function() {
    $carousel.carousel("next");
  });

  // 监听轮播切换事件，适配不同媒体类型的行为
  $carousel.on("slide.bs.carousel", function(e) {
    const $targetSlide = $(e.relatedTarget);
    const $targetVideo = $targetSlide.find(".carousel-video");

    if ($targetVideo.length) {
      // 切换到视频幻灯片：暂停轮播自动切换，确保视频开始播放
      $carousel.carousel("pause");
      $targetVideo[0].play();
    } else {
      // 切换到图片/其他：开启自动切换（这里设为5秒，可根据需求调整）
      $carousel.carousel({ interval: 5000 });
    }
  });
});

额外说明 #

1. 关于autoplay：现代浏览器要求视频静音（muted）才能自动播放，你已经添加了这个属性，无需修改。
2. 图片自动切换：如果不需要图片自动切换，直接删掉else块里的代码即可，保持轮播手动切换。
3. 动态内容适配：如果你的轮播内容是后续通过AJAX动态加载的，可以改用事件委托绑定ended事件，确保新添加的视频也能生效：

   $("#mediaCarousel").on("ended", ".carousel-video", function() {
     $carousel.carousel("next");
   });
   

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