HTML5視頻 - 時間更新和清理

Question

我有一個HTML5視頻，它顯示並在jquery拖放元素在其正確的插槽後播放。視頻播放時，我有一個腳本，用於監聽視頻上的時間更新，並將拖動的元素背景顏色更改爲高亮，然後根據時間回到原始顏色。

現在的問題是，擦洗視頻時說向後完之後，拖拽元素都突出時的代碼是：

function play_vid(){ 
$("#slots").addClass('left'); 
$("#element1").position({my: "left top",at: "left top",of: "#slot_1"}); 
$("#element2").position({my: "left top",at: "left top",of: "#slot_2"}); 
$("#element3").position({my: "left top",at: "left top",of: "#slot_3"}); 
$("#element4").position({my: "left top",at: "left top",of: "#slot_4"}); 
$("#element5").position({my: "left top",at: "left top",of: "#slot_5"}); 
$(".video").show(); 
$("#v1").show(); 
v1.play(); 
document.getElementById('v1').addEventListener("timeupdate", function() { 
$("#element1").removeClass('correct'); 
$("#element1").addClass('highlighted'); 
if(this.currentTime > 15) { 
$("#element1").removeClass('highlighted'); 
$("#element1").addClass('correct'); 
$("#element2").removeClass('correct'); 
$("#element2").addClass('highlighted'); 
} 
    if(this.currentTime > 30) { 
$("#element2").removeClass('highlighted'); 
$("#element2").addClass('correct'); 
$("#element3").removeClass('correct'); 
$("#element3").addClass('highlighted'); 
} 
     if(this.currentTime > 45) { 
$("#element3").removeClass('highlighted'); 
$("#element3").addClass('correct'); 
$("#element4").removeClass('correct'); 
$("#element4").addClass('highlighted'); 
} 
      if(this.currentTime > 60) { 
$("#element4").removeClass('highlighted'); 
$("#element4").addClass('correct'); 
$("#element5").removeClass('correct'); 
$("#element5").addClass('highlighted'); 
} 
}); 

我怎樣才能讓這個只有擦洗視頻集錦元素根據以上時間？

見小提琴在http://jsfiddle.net/7YW59/

Answer 1

不知道這是一個很好的解決方案，但作爲一個選項，它可能會更容易來思考這個，如果你有其中明確列出哪些類的每個元素應該有一定的結構時間跨度。

var classesAtTime = { 
    0 : { // starting at time 0 these elements should have these classes 
     element1 : 'highlighted', 
     element2 : '', 
     element3 : '' 
    }, 
    15 : { // starting at time 15 ... 
     element1 : 'correct', 
     element2 : 'highlighted', 
     element3 : '' 
    }, 
    30 : { 
     element1 : 'highlighted', 
     element2 : 'correct', 
     element3 : 'highlighted' 
    } 
    // ... and so on 
}; 

雖然這有點長，但很容易看出您在什麼時候會處於什麼狀態。然後在你的timeupdate你可以有這樣的事情挑選哪些元素應該在這一點上哪些類：

document.getElementById('v1').addEventListener("timeupdate", function() { 
    var neededClasses = {}; 
    for (var i = 0; i <= this.currentTime; i++) { 
     neededClasses = classesAtTime[i]; 
    } 

    // Go through elements 
    for (var elementID in classesAtTime) { 
     if (!classesAtTime.hasOwnProperty(elementID)) continue; 
     $('#' + elementID).attr('class', neededClasses[elementID]); 
    } 
} 

如果需要的東西有多個類，您可以列出它們，例如部件1：「突出富吧「。