Wie kann man den Timer jede Sekunde kitzeln lassen und springen lassen, wenn das Video weitergeleitet oder zurückgespult wird?

Question

Ich versuche, einen Timer zu machen, der indirekt mit dem Video synchronisiert. Wenn starttimer geklickt wird, sollte es meinen Timer starten und jede Sekunde kitzeln. Hier

ist der Prozess:

1. Start the video 
2. At a certain time in video, click to start the timer 
3. Timer starts from 00:00:00 and should tickle each second. 
4. If the video is forwarded by `n` seconds timer should be 'timer+n` seconds. Same for the case, when video is rewinded - `timer-n' 

Aber mein Timer, nicht richtig funktioniert. Es funktioniert gut, wenn ich den Timer starte, aber wenn ich durch n Sekunden vorschlage, geht es manchmal durch n und manchmal durch n+1 oder n+2 und wenn ich zurückspulen durch n geht es zurück an seinem eigenen Willen.

Ich kann einfach nicht die Logik richtig bekommen.

aufgerufen, wenn starttimer geklickt wird: (Es beginnt die Uhr von 00:00:00)

var mtimer = 0; 
$('#starttimer').click(function() { // Starts the clock 
           playing = true; 

           if(!timerstarted) { 
            setInterval(function() { 
            if(playing) {            
              mtimer++; 
             $('#starttimer').html(getHHMMSS(mtimer)); 
            } 
             } , 1000); 
            timerstarted = true; 
           } 
          }); 

Wenn Video weitergeleitet wird oder zurückgespult: (Ich habe auch eine Steuerung, wobei ich das Video vorwärts bewegen konnte um 3 Sekunden oder zurück um 3 Sekunden mit Shift + r + l und Verschiebung. I hoffen, dass es äquivalent zu seeking)

var lastCurrentTime = 0; 
$('#match').on('seeking',function(event) { 
            var difference = 0; 
            var newCurrentTime = $('#match').get(0).currentTime; 
            if(newCurrentTime > lastCurrentTime) { 
             difference = newCurrentTime - lastCurrentTime; 
              playing = false; 
              mtimer = mtimer + difference; 
              $('#starttimer').html(getHHMMSS(mtimer)); 
              playing = true; 
            }else { 
             difference = lastCurrentTime - newCurrentTime; 

              playing = false; 
              mtimer = mtimer - difference; 
              console.log("Difference : " + difference); 
              playing = true; 

             if(mtimer <= 0) { 
              mtimer = 0; 
              $('#starttimer').html(getHHMMSS(mtimer)); 
             } 
            } 
       lastCurrentTime = newCurrentTime; 

      }); 

Answer 1

1. den offfset Set
2. Verwendung Offset für mtimer hin und her
3. clearInterval bewegen, wenn die Suche nach

starttimer Funktion:

$('#starttimer').click(function() { // Starts the clock 
           playing = true; 

           if(!timerstarted) { 
            offset = $('#match').get(0).currentTime; 
            timerv = setInterval(function() { 
             var newCurrentTime = $('#match').get(0).currentTime; 


            if(playing) {            
              mtimer++; 
             $('#starttimer').html(getHHMMSS(mtimer)); 
            }                    

              //$('#starttimer').html(getHHMMSS(mtimer)); 
             } , 1000); 
            timerstarted = true; 
           } 
          }); 

seeking Funktion:

$('#match').on('seeking',function(event) { 
            playing = true; 
            if(timerstarted) { 
             clearInterval(timerv); 
             var newCurrentTime = $('#match').get(0).currentTime; 
             mtimer = newCurrentTime - offset; 
             if(mtimer < 0) { 
                mtimer = 0; 
                offset = 0; 
                $('#starttimer').html(getHHMMSS(mtimer)); 
                console.log("playing : " + playing); 
             } 
             timerv = setInterval(function() {          
              if(playing) { 
                console.log("Inside playing..."); 
                mtimer++; 
               $('#starttimer').html(getHHMMSS(mtimer)); 
              }                    
               /*if(playing) { 
                if(timerset === true && $('#timeentered').val() !== '') { 
                 mtimer = $('#timeentered').val(); 
                 timerset = false; 
                } 
                mtimer++; 
               }*/ 
               //$('#starttimer').html(getHHMMSS(mtimer)); 
              } , 1000); 
             lastCurrentTime = newCurrentTime; 
            } 
      }); 

Answer 2

Sie benötigen zwei Timer-Variablen zu synchronisieren, wenn Sie starten den Timer. Die Variable mtimer beginnt mit dem Zählen der Sekunden, wenn Sie den Timer starten, aber lastCurrentTime wird auf Null gesetzt, bis Sie das Video zum ersten Mal in die eine oder andere Richtung "suchen". Dies wird das Timing ausschalten.

Nehmen wir an, Sie starten den Timer eine Minute in das Video. Sobald Sie das Video für eine Minute angeschaut haben, mtimer ist bei 60 Sekunden, ist der Video-Timer bei 120 Sekunden und lastCurrentTime ist immer noch bei Null. Wenn ich das Video wieder von 90 Sekunden rollen, mtimer von 30 Sekunden negativ gehen sollte, aber auf Basis der Code wird mtimer zu positiv 30.

eingestellt werden Versuchen Sie folgendes:

var mtimer = 0; 
var lastCurrentTime = 0; 
$('#starttimer').click(function() { // Starts the clock 
          playing = true; 

          if(!timerstarted) { 

           //Set the timer before starting the interval 
           //Gives you one second with the timer at zero before the first interval runs 
           $('#starttimer').html(getHHMMSS(mtimer)); 

           //Set lastCurrentTime to the video time. 
           lastCurrentTime = $('#match').get(0).currentTime; 
           setInterval(function() { 
            if(playing) {            
             //Keeps both timers synched as the movie plays. 
             mtimer++; 
             lastCurrentTime++; 
             $('#starttimer').html(getHHMMSS(mtimer)); 
           } 
            } , 1000); 
           timerstarted = true; 
          } 
         }); 

jetzt Ihre Aktuelle Suchfunktion sollte funktionieren. Wenn der newCurrentTime größer ist als der lastCurrentTime, wird mtimer um den Unterschied erweitert. Wenn das Gegenteil der Fall ist, wird mtimer um den Unterschied reduziert. In dem oben erwähnten Fall, wenn mtimer um 30 Sekunden negativ sein sollte, würde mtimer auf Null gesetzt werden. Basierend auf Ihrem Code gehe ich davon aus, dass Sie den Timer zurücksetzen möchten, wenn mtimer unter Null geht.

Hoffe das passt zu Ihren Bedürfnissen.