javascript - 每天更换视频

Question

我有一些视频，需要连续播放。但是有一个条件，第一个视频最多播放24小时。也就是说，第一个视频循环播放24小时。在下一个视频之后。现在视频正在连续播放。但是我不知道如何设置播放视频的时间。请帮我解决这个问题。谢谢。

这是我的代码。

var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];

var currentIndex = 0;
// listener function changes src
function myNewSrc() {
  var myVideo = document.getElementsByClassName('episodeVideo')[0];
  myVideo.src = videoSources[currentIndex];
  myVideo.load();
}


// add a listener function to the ended event
function myAddListener() {
  var myVideo = document.getElementsByClassName('episodeVideo')[0];
  currentIndex = (currentIndex + 1) % videoSources.length;
  myVideo.src = videoSources[currentIndex];
  myVideo.addEventListener('ended', myNewSrc, false);

}

<div class="video-wrapper-main">
  <video onended="myAddListener()" class="episodeVideo" preload="auto" autoplay controls>
             <source src="" type="video/mp4">
      </video>
</div>

Answer 1

var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];

var startTime = Date.now();

var currentIndex = 0;
// listener function changes src
function myNewSrc() {
  var myVideo = document.getElementsByClassName('episodeVideo')[0];
  var newTime = Date.now();
  var msIn24Hours = 1000 * 60 * 60 * 24;
  var isAfter24Hours = newTime - startTime >= msIn24Hours;
  if(isAfter24Hours) {
    myVideo.src = videoSources[currentIndex];
    startTime = newTime;
  }
  myVideo.load();
}


// add a listener function to the ended event
function myAddListener() {
  var myVideo = document.getElementsByClassName('episodeVideo')[0];
  currentIndex = (currentIndex + 1) % videoSources.length;
  myVideo.src = videoSources[currentIndex];
  myVideo.addEventListener('ended', myNewSrc, false);

}

然后您可以将开始存储到 localStorage 中并使用该值。