title: HTML5 Video - timeupdate and scrubbing
body: <p>I have an HTML5 video which shows and plays after jquery drag and drop elements are in their correct slots.  While the video plays, I have a script which listens to the timeupdate on the video and changes the dragged elements background color to a highlight and then back to the original color depending on the time.</p>
  
  <p>Now the issue is that when scrubbing the video say backwards after finished, the dragged elements are all highlighted when the code is:</p>
  
  <pre><code>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 &gt; 15) {
  $("#element1").removeClass('highlighted');
  $("#element1").addClass('correct');
  $("#element2").removeClass('correct');
  $("#element2").addClass('highlighted');
  }
      if(this.currentTime &gt; 30) {
  $("#element2").removeClass('highlighted');
  $("#element2").addClass('correct');
  $("#element3").removeClass('correct');
  $("#element3").addClass('highlighted');
  }
          if(this.currentTime &gt; 45) {
  $("#element3").removeClass('highlighted');
  $("#element3").addClass('correct');
  $("#element4").removeClass('correct');
  $("#element4").addClass('highlighted');
  }
              if(this.currentTime &gt; 60) {
  $("#element4").removeClass('highlighted');
  $("#element4").addClass('correct');
  $("#element5").removeClass('correct');
  $("#element5").addClass('highlighted');
  }
  });
  </code></pre>
  
  <p>How can I make it so that scrubbing the video highlights only the elements as per the times above?</p>
  
  <p>See Fiddle at <a href="http://jsfiddle.net/7YW59/" rel="nofollow">http://jsfiddle.net/7YW59/</a></p>