Javascript 如何在切换到gallery中的下一个视频时暂停播放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>

❮
❯
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myVideos”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

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

功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myVideos”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

---

来源：

这是因为您只需为所有其他视频设置“无显示”，而不会在切换之前暂停它们

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";
}

功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“myVideos”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

这应该可以做到，在每个myVideo实例中暂停视频元素