如何让 HTML 视频在切换到图库中的下一个视频时暂停播放

Question

我需要帮助弄清楚如何在单击 previous/next 箭头时停止播放 html 视频，此时我完全没有想法。我有一个简单的视频库，工作正常，除了以下事实：当我 select 下一个或上一个当前视频将继续播放并且新视频和上一个视频之间的音频将开始相互重叠。关于如何解决此问题的任何想法？谢谢

这是我在下面使用的代码，不包括我尝试让视频暂停的任何尝试：

<div class="vidContainer">
  <div class="myVideos">
      <video src="images/Videography/Cali/P1010538.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video src="images/Videography/Cali/P1010540.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video src="images/Videography/Cali/P1010541.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video src="images/Videography/Cali/P1010543.MP4" controls style="width:100%">
  </div>
</div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("myVideos");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}
</script>

Answer 1

您需要在与幻灯片索引相对应的视频中添加一个 ID 字段。可能以一些文本为前缀，但在这个例子中我只保留数字。

<div class="vidContainer">
  <div class="myVideos">
      <video id="1" src="images/Videography/Cali/P1010538.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video id="2" src="images/Videography/Cali/P1010540.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video id="3" src="images/Videography/Cali/P1010541.MP4" controls style="width:100%">
  </div>
  <div class="myVideos">
      <video id="4" src="images/Videography/Cali/P1010543.MP4" controls style="width:100%">
  </div>
</div>

一旦您可以识别特定视频：

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("myVideos");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      document.getElementById(i).pause();
      slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
  document.getElementById(slideIndex-1).play();
}

来源：https://www.w3schools.com/tags/av_met_pause.asp

Answer 2

这是因为您只是为所有其他视频设置了显示 none，并没有在切换前暂停它们。

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("myVideos");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
      slides[i].querySelector("video").pause()
  }
  slides[slideIndex-1].style.display = "block";
}

这应该可以解决问题，它会暂停每个 myVideo 实例中的视频元素。

如何让 HTML 视频在切换到图库中的下一个视频时暂停播放

How to make an HTML video pause playing when switching to next video in gallery

html

javascript

video

pause