如何从上一个视频结束的确切时间播放视频？答案

【问题标题】：How to play a video from the exact time where the previous video ended?如何从上一个视频结束的确切时间播放视频？
【发布时间】：2018-05-29 23:46:47
【问题描述】：

我的代码中有 4 个视频，其中 video1.mp4 是主视频，我需要在主视频停止的同时继续播放任何其他视频。例如：video1.mp4 在 1:02 停止，点击 video2.mp4 后它从 1:02 开始而不是开始。我究竟做错了什么？

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

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
  }
  x[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " w3-opacity-off";
}

document.addEventListener('play', function(e){
    var videos = document.getElementsByTagName('video');
    for(var i = 0, len = videos.length; i < len;i++){
        if(videos[i] != e.target){
            videos[i].pause();
        }
    }
}, true);

</script>

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.demo {cursor:pointer}
</style>
<body>

<div class="w3-content" style="max-width:1200px">
  <video class="mySlides" src="video1.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video2.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video3.mp4" controls style="width:100%"></video>
  <video class="mySlides" src="video4.mp4" controls style="width:100%"></video>

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <video class="demo w3-opacity w3-hover-opacity-off" src="video2.mp4" style="width:100%" onclick="currentDiv(2)"></video>
    </div>
    <div class="w3-col s4">
      <video class="demo w3-opacity w3-hover-opacity-off" src="video3.mp4" style="width:100%" onclick="currentDiv(3)"></video>
    </div>
    <div class="w3-col s4">
      <video class="demo w3-opacity w3-hover-opacity-off" src="video4.mp4" style="width:100%" onclick="currentDiv(4)"></video>
    </div>
  </div>
</div>

</body>
</html>

【问题讨论】：

.currentTime
我知道它是 currentTime，但我不确定如何在我的代码中使用它。我需要获取当前视频的当前时间，无论该视频是什么，并将该时间作为点击时下一个视频的开始时间。

标签： javascript jquery html css video

【解决方案1】：

我解决了我的问题。

    var currentVideoIndex = 0;
    playVideo(currentVideoIndex + 1);

    function playVideo(indexForNormalPeople) {
      var newVideoIndex = indexForNormalPeople - 1;
      var videos = document.getElementsByClassName("video");
      var thumbs = document.getElementsByClassName("thumb");
      var currentTime = 0;
      var isVideoPaused = videos[currentVideoIndex].paused;
      console.log('paused: ', isVideoPaused);
      if (newVideoIndex >= videos.length) {
        currentVideoIndex = videos.length - 1;
      }
      else if (newVideoIndex < 0) {
        currentVideoIndex = 0;
      }
      for (var i = 0; i < videos.length; i++) {
        if (currentVideoIndex === i) {
          currentTime = videos[i].currentTime;
        }
        videos[i].style.display = "none";
      }
      videos[newVideoIndex].style.display = "block";
      videos[newVideoIndex].currentTime = currentTime;
      if (!isVideoPaused) {
        videos[newVideoIndex].play();
      }
      else {
        videos[newVideoIndex].pause();
      }
      currentVideoIndex = newVideoIndex;
    }

    document.addEventListener('play', function(e){
    var videos = document.getElementsByTagName('video');
    for(var i = 0, len = videos.length; i < len;i++){
        if(videos[i] != e.target){
            videos[i].pause();
        }
    }
}, true);

<!DOCTYPE html>
<html>
<title>Videos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  .mySlides {
    display: none
  }

  .demo {
    cursor: pointer
  }
</style>

<body>

  <div class="w3-content" style="max-width:1200px">
    <video id="video1" class="video" controls style="width:100%">
      <source src="video1.mp4" type="video/mp4">
    </video>

    <video id="video2" class="video" controls style="width:100%">
      <source src="video2.mp4" type="video/mp4">
    </video>

    <video id="video3" class="video" controls style="width:100%">
      <source src="video3.mp4" type="video/mp4">
    </video>

    <div class="w3-row-padding w3-section">
      <div class="w3-col s4">
        <img class="thumb w3-opacity w3-hover-opacity-off" src="video1.jpg" style="width:100%" onclick="playVideo(1)" />
      </div>
      <div class="w3-col s4">
        <img class="thumb w3-opacity w3-hover-opacity-off" src="video2.jpg" style="width:100%" onclick="playVideo(2)" />
      </div>
      <div class="w3-col s4">
        <img class="thumb w3-opacity w3-hover-opacity-off" src="video3.jpg" style="width:100%" onclick="playVideo(3)" />
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：