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

如果某些东西需要有多个类，您可以将它们列为例如 element1 : 'highlighted foo bar'。