javascript - 单击图像时视频停止

Question

我有一个带有缩略图的视频库。当我点击缩略图时，会出现一个视频。单击另一个缩略图时如何停止/重置正在播放的视频？ 这是我的代码

function changeImage(current) {
    var imagesNumber = 3;

    for (i=1; i<=imagesNumber; i++) {
        if (i == current) {
            document.getElementById("normal" + current).style.display = "block";
        } else {
            document.getElementById("normal" + i).style.display = "none";
        }

    }
}

https://jsfiddle.net/r8eboghL/1/

Answer 1

给每个视频一个id。

然后在当前即将播放的视频上，使用.currentTime = 0;重新开始，然后使用.play()。

另外，如果您希望第一个视频在页面加载时开始播放，您可以给第一个视频自动播放。

   function changeImage(current) {
     var imagesNumber = 3;

     for (i = 1; i <= imagesNumber; i++) {
       if (i == current) {
         document.getElementById("normal" + current).style.display = "block";
         document.getElementById("video" + current).currentTime = 0;
         document.getElementById("video" + current).play();
       } else {
         document.getElementById("normal" + i).style.display = "none";
         document.getElementById("video" + i).pause();
       }

     }
   }

body {
  margin: 0;
  padding: 0;
  background: #222;
  color: #EEE;
  text-align: center;
  font: normal 9pt Verdana;
}
a:link,
a:visited {
  color: #EEE;
}
img {
  border: none;
}
#normal2,
#normal3,
#normal4,
#normal5 {
  display: none;
}
#gallery {
  margin: 0 auto;
  width: 800px;
}
#thumbs {
  margin: 10px auto 10px auto;
  text-align: center;
  width: 800px;
}
#bigimages {
  width: 770px;
  float: left;
}
#thumbs img {
  width: 130px;
  height: 130px;
}
#bigimages video {
  border: 4px solid #555;
  margin-top: 5px;
  width: 750px;
}
#thumbs a:link,
#thumbs a:visited {
  width: 130px;
  height: 130px;
  border: 6px solid #555;
  margin: 6px;
  float: left;
}
#thumbs a:hover {
  border: 6px solid #888;
}

<div id="gallery">
  <div id="thumbs">
    <a href="javascript: changeImage(1);">
      <img src="Noragami Aragoto Op.png" alt="" />
    </a>
    <a href="javascript: changeImage(2);">
      <img src="Fairy Tail Op.png" alt="" />
    </a>
    <a href="javascript: changeImage(3);">
      <img src="God Eater Op.png" alt="" />
    </a>

  </div>

  <div id="bigimages">
    <div id="normal1">
      <video id="video1" controls="controls" autoplay>
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
      </video>
    </div>

    <div id="normal2">
      <video id="video2" controls="controls">
        <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
      </video>
    </div>

    <div id="normal3">
      <video id="video3" controls="controls">
        <source src="http://haignet.co.uk/html5-video-element-test.mp4" type="video/mp4">
      </video>
    </div>


  </div>
</div>