Bootstrap 4.1轮播组件嵌入视频无法自动播放求助

我来帮你搞定这个视频自动播放的问题，你的代码里有几个关键细节需要调整，咱们一个个来修正：

1. 修正轮播项选择器 #

Bootstrap 4里轮播的活动项类是carousel-item，而不是你代码里写的item，这会导致JS找不到对应的视频元素。把JS里的选择器从$('#carousel .item.active')改成$('#carousel .carousel-item.active')就好。

2. 适配浏览器自动播放策略 #

现在主流浏览器（Chrome、Firefox等）都有自动播放限制，非静音视频无法自动播放，所以必须给video标签加上muted属性，同时加上playsinline可以更好适配移动端播放。

3. 简化元素判断逻辑 #

原来的elemento.prop("tagName") == "VIDEO"可以简化成判断elemento.length > 0，只要找到视频元素就执行播放/暂停操作，代码更简洁高效。

修改后的完整代码 #

HTML部分：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!doctype html>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-keyboard="true" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://dummyimage.com/560x320/ff0/000&text=FirstSlide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://dummyimage.com/560x320/0ff/000&text=SecondSlide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <!-- 新增muted和playsinline属性 -->
      <video src="http://techslides.com/demos/sample-videos/small.mp4" loop muted playsinline style="width:100%;height:100%;"></video>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://dummyimage.com/560x320/f0f/000&text=LastSlide" alt="Last slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

JavaScript部分：

$('#carousel').on('slid.bs.carousel', function(e) {
  // 修正选择器为.carousel-item
  let elemento = $('#carousel .carousel-item.active video').first();
  // 简化判断逻辑
  if (elemento.length > 0) {
    elemento.get(0).play();
  }
});

$('#carousel').bind('slide.bs.carousel', function(e) {
  let elemento = $('#carousel .carousel-item.active video').first();
  if (elemento.length > 0) {
    elemento.get(0).pause();
  }
});

$(document).bind('keyup', function(e) {
  if (e.which == 39) {
    $('.carousel').carousel('next');
  } else if (e.which == 37) {
    $('.carousel').carousel('prev');
  }
});

这样调整之后，当轮播切换到视频项时，视频就会自动静音播放，切换走的时候也会暂停，完全符合你的需求啦~

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