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

问题描述

当我单击上一个/下一个箭头时，我需要帮助弄清楚如何使html视频停止播放，此时我全都没主意了。我有一个简单的视频画廊，除了我选择下一个或上一个视频时，当前视频将继续播放，并且新视频和前一个视频之间的音频将开始相互重叠，这一点很正常。关于如何解决此问题的任何想法？谢谢

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

<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>

解决方法

您需要在视频中添加一个与幻灯片索引相对应的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

,

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

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实例中的video元素暂停。