如何在TV浏览器的Bootstrap轮播中播放不同幻灯片的多段视频？

你的问题根源有两点：

• 初始化代码仅操作了页面中第一个<video>元素，后续视频未被设置静音、循环属性，也没触发播放逻辑
• 未监听Bootstrap轮播的切换事件，幻灯片切换后不会自动触发新激活项内的视频播放

修复方案及完整代码 #

1. 给所有视频统一配置静音、循环属性
2. 监听轮播的slid.bs.carousel事件（幻灯片切换完成后触发），切换时暂停所有视频，仅播放当前激活项内的视频
3. 初始加载时检查激活项，若包含视频则触发播放

修改后的完整代码：

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="10000" data-bs-pause="false" style="height: 100vh !important;overflow: hidden;">
  <div class="carousel-inner">

    <div class="carousel-item active">
      <h1>TEST MODE : ON</h1>
    </div>

    <?php
      if ($resultimg->num_rows > 0) {
        while ($row = $resultimg->fetch_assoc()) {
    ?>

    <div class="carousel-item">
      <?php
        $filePath = "admin/slider_images/{$row['img_name']}";
        $imageSize = getimagesize($filePath);
        
        if ($imageSize !== false) {
            // 图片资源
            echo '<img src="' . $filePath . '" class="d-block w-100">';
        } else {
            // 视频资源
            echo '<div class="d-flex align-items-center justify-content-center h-100">';
            echo '<video class="d-block w-100"><source src="' . $filePath . '" type="video/mp4"></video>';
            echo '</div>';
        }
      ?>
    </div>

    <?php
        }
      }
    ?>

  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化轮播实例
    const carousel = new bootstrap.Carousel(document.getElementById('carouselExampleSlidesOnly'));
    // 获取页面所有视频元素
    const allVideos = document.querySelectorAll('video');
    
    // 批量设置视频属性
    allVideos.forEach(video => {
      video.muted = true;
      video.loop = true;
    });

    // 播放当前激活项内的视频
    function playActiveVideo() {
      // 先暂停所有视频，避免多视频同时播放
      allVideos.forEach(video => video.pause());
      // 定位当前激活轮播项内的视频
      const activeVideo = document.querySelector('.carousel-item.active video');
      if (activeVideo) {
        activeVideo.play().catch(err => {
          console.log('视频播放失败:', err);
        });
      }
    }

    // 初始加载时检查激活项
    playActiveVideo();

    // 监听轮播切换完成事件
    document.getElementById('carouselExampleSlidesOnly').addEventListener('slid.bs.carousel', playActiveVideo);
  });
</script>

关键细节说明 #

• 用DOMContentLoaded替代window.onload，更早触发初始化逻辑
• 通过querySelectorAll获取所有视频元素，实现批量配置
• slid.bs.carousel是Bootstrap轮播的切换完成事件，确保幻灯片切换后再处理视频播放
• 每次切换时先暂停所有视频，再播放当前激活项视频，避免资源冲突

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