Question

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

＆＃13;

try:
    mod = importlib.import_module(a)
except ImportError:
    # handle that problem
else:
    mod.main()

＆＃13;

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

＆＃13;

Answer 1

我解决了我的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: