Come far solleticare il timer ogni secondo e farlo saltare quando il video viene inoltrato o riavvolto?

Question

Sto provando a creare un timer che si sincronizzi indirettamente con il video. Quando si fa clic su starttimer, dovrebbe iniziare il mio timer e solleticare ogni secondo.

Ecco il processo:

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' 

Ma il mio timer, non funziona correttamente. Funziona bene, quando avvio il timer, ma quando inoltro per n secondi, a volte va da n e talvolta da n+1 o n+2 e quando si riavvolge da n si torna a proprio piacimento.

Non riesco a ottenere la logica corretta.

Chiamato quando si fa clic starttimer: (inizia l'orologio da 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; 
           } 
          }); 

Quando il video viene inoltrato o riavvolto: (ho anche un controllo, in cui ho potuto spostare il video in avanti da 3 secondi o indietro di 3 secondi premendo shift + r e shift + l. Spero che sia equivalente a 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. Impostare l'offfset
2. Usa compensato per lo spostamento mtimer avanti e indietro
3. clearInterval quando si cerca

starttimer funzione:

$('#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 funzione:

$('#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

È necessario sincronizzare i due variabili timer quando si avvia il timer. La variabile mtimer inizia a contare i secondi quando si avvia il timer, ma lastCurrentTime è impostato su zero fino alla prima volta che si "cerca" il video in una direzione o in un'altra. Questo cancellerà i tempi.

Diciamo che si avvia il timer un minuto nel video. Dopo aver guardato il video per un minuto, mtimer è a 60 secondi, il timer video è a 120 secondi e lastCurrentTime è ancora a zero. Se mi rotolo il video indietro di 90 secondi, mtimer dovrebbe andare negativo per trenta secondi, ma, in base al codice, mtimer sarà impostato a positivo 30.

Prova questo:

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

Ora, il vostro la funzione di ricerca corrente dovrebbe funzionare. Se lo newCurrentTime è più grande dello lastCurrentTime, lo mtimer sarà anticipato dalla differenza. Se è vero il contrario, allora mtimer verrà ridotto della differenza. Nel caso che ho menzionato sopra, quando mtimer avrebbe dovuto essere negativo di trenta secondi, mtimer sarebbe stato impostato su zero. In base al tuo codice, presumo che desideri il reset del timer se mtimer scende sotto lo zero.

Spero che questo si adatta alle vostre esigenze.