视频轮播切换时音频混音问题求助

我用Bootstrap实现了视频轮播，目前已完成点击视频切换静音/播放的功能，但存在一个问题：点击prev/next按钮切换视频时，如果没有手动静音前一个视频，它的音频会继续播放，导致和当前视频的音频混音。我需要实现点击切换按钮时自动静音所有视频，确保只有当前点击的视频能播放音频。我是前端新手，希望得到帮助，谢谢！

现有代码 #

<div id="video_wrapper" class="carousel slide carousel-fade my-0" data-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#video_wrapper" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

  <div class="carousel-item active">
    <video class="video" autoplay loop muted>
      <source src="assets/img/1.mp4" type="video/mp4">
    </video>
  </div>

  <div class="carousel-item">
    <video class="video" autoplay loop muted>
      <source src="assets/img/2.mp4" type="video/mp4">
    </video>
  </div>

  <div class="carousel-item">
    <video class="video" autoplay loop muted>
      <source src="assets/img/3.mp4" type="video/mp4">
    </video>
  </div>

  <button class="carousel-control-prev" type="button" data-bs-target="#video_wrapper" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#video_wrapper" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>   
</div>

$(document).ready(function(){ 
  $("video").prop('muted', true);

  $("video").click(function (){ 
    $(this).prop('muted', !$(this).prop('muted')); 
  });
});

解决方案 #

问题出在轮播切换时没有自动处理之前视频的静音状态，我们可以利用Bootstrap轮播提供的切换事件来解决这个问题：

修改你的JavaScript代码，添加轮播切换的监听事件，在切换完成后自动静音所有视频：

$(document).ready(function(){ 
  // 初始所有视频静音
  $("video").prop('muted', true);

  // 点击视频切换静音状态
  $("video").click(function (){ 
    $(this).prop('muted', !$(this).prop('muted')); 
  });

  // 监听轮播切换完成事件，自动静音所有视频
  $('#video_wrapper').on('slid.bs.carousel', function () {
    $("video").prop('muted', true);
  });
});

说明 #

• slid.bs.carousel是Bootstrap轮播组件提供的事件，会在轮播切换完成后触发，此时新的轮播项已经激活，我们通过这个事件把所有视频设为静音，确保不会有混音问题。
• 如果你希望在切换开始时就静音，可以把事件换成slide.bs.carousel（切换开始时触发），效果类似。

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