我怎样才能让视频播放中的音频成为唯一活动的音频

Question

这是视频滑块的代码。我尝试了下面显示的脚本，它可以在单击视频时打开和关闭音频，但当我滑到下一个视频时，如果我没有单击关闭上一个视频的音频，则音频仍然打开在下一个视频上，所以如果我点击该视频，所有音频都会混合。

我需要一些帮助，我仍然无法弄清楚，我想要的只是在单击上一个/下一个按钮时静音，这样当我单击我正在播放的视频时，该视频的声音是唯一玩的。

我在评论中被告知有很多问题，但我不知道这些是什么，我是新来的，我实际上觉得我可以制作视频滑块是成功的。有人可以帮助我吗？预先感谢！

  <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')); });

Answer 1

很高兴看到您对解决这个问题的热情！我了解您在视频滑块方面遇到的问题。问题是，当您导航到下一个或上一个视频时，如果您没有手动将其静音，则上一个视频的音频将保持打开状态。这是一个解决方案，可确保只有当前活动的视频在您单击它时播放声音，从而使所有其他视频静音。

首先，让我们调整 JavaScript，以便在幻灯片更改时将所有视频静音，并处理视频点击时的静音/取消静音。您可以通过侦听

slide.bs.carousel

事件并在幻灯片更改时将所有视频静音来实现此目的。这是更新后的代码：

<div id="video_wrapper" class="carousel slide carousel-fade my-0" data-bs-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-inner">
    <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>
  </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>

<script>
$(document).ready(function(){
  // Ensure all videos are muted initially
  $("video").prop('muted', true);

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

  // Mute all videos when the carousel slides
  $('#video_wrapper').on('slide.bs.carousel', function () {
    $("video").prop('muted', true);
  });
});
</script>

在此代码中：

1. 所有视频最初都是静音的。
2. 单击视频可切换其静音状态。
3. 当轮播幻灯片发生变化时，所有视频都会静音，以确保单击时只有当前幻灯片上的视频播放声音。

这应该可以解决同时播放多个音频的问题。如果您还有任何疑问或遇到其他问题，请随时提问。 祝您的项目顺利！