毎日ビデオを変更する

Question

私はいくつかのビデオを持っており、それは連続して再生する必要があります。しかし、条件があり、最初のビデオは24時間まで再生する必要があります。つまり、最初のビデオを24時間ループします。その後、次のビデオ。今度はビデオが連続して再生されています。しかし、私はビデオを再生する時間を設定する方法を知らない。この問題を解決するために私を助けてください。ありがとうございました。

ここはMy codeです。

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にスタートを格納し、その値を使用することができます。