Question

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

function endsWith($haystack, $needle) {
    return $needle === "" || (($temp = strlen($haystack) - strlen($needle)) >= 0 && strpos($haystack, $needle, $temp) !== FALSE);
}

$array = [];
$result = false;
foreach($array as $img) {
  if(endsWith($img, '.jpg')) {
    $result = $img;
    break;
  }
}

echo $result;

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

Answer 1

为每个视频指定id。

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

此外，如果您希望该视频在页面加载时开始，您可以提供第一个视频autoplay。

   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>

单击图像时视频停止

1 个答案: