在視頻中跳轉到陣列中的時間

Question

按照Control start position and duration of play in HTML5 video的順序，我試圖在每個完成播放時自動從一個段跳到下一個段。每個段將具有相同的持續時間，並且每個段的開始時間將在一個數組中。

我似乎無法弄清楚如何在addEventListener之後遍歷數組。

var video = document.getElementById('player1'); 


function settheVariables() { 

var videoStartTime= ["4","15","26","39"]; 

for (var i = 0; i < videoStartTime.length; i++) { 

if (video.currentTime < videoStartTime[0]){ 
     video.currentTime = videoStartTime[i]; 
} 
durationTime = 5; 

} 



//This part works when I plug in numbers for videoStartTime. 

video.addEventListener('timeupdate', function() { 

    if(this.currentTime > (// videoStartTime [current index] + durationTime)){ 

    this.currentTime = (// videoStartTime with next index); 
    video.play(); } 

}); 

} 

Answer 1

您需要將數組中的值更改爲整數，而不是字符串 - 您不會將蘋果與蘋果進行比較。

下面的更新和稍微簡化的示例播放（最初從視頻開始），直到時間戳命中當前標記加上5秒鐘，然後跳轉到下一個標記（並循環回去）。

它並不適合用戶自己清理視頻（儘管它會在當前部分開始時超過5秒時陷入陷阱，但回過頭會混淆視覺） - 如果您想要這些5S範圍內的控制，你會想要做的時間戳VS數組的一些更聰明的檢查，以確保你在那裏你應該是

反正...代碼：

<script> 
var video = document.getElementById('player1'); 

var videoStartTime= [4,15,26,39]; 
durationTime = 5; 
currentIndex=0; 

video.addEventListener('timeupdate', function() { 
// console.log(this.currentTime); 

    if (this.currentTime > (videoStartTime[currentIndex] + durationTime)) 
    { 
     currentIndex = (currentIndex + 1) % videoStartTime.length // this just loops us back around 
    this.currentTime = videoStartTime[currentIndex]; 
// video.play(); // don't need this if the video is already playing 
} 

}); 

</script>