How to make the timer tickle each second and make it jump when video is forwarded or rewinded?

Question

I am trying to make a timer which indirectly syncs with the video. When starttimer is clicked, it should starts my timer and tickle each second.

Here is the process:

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'

But my timer, is not functioning properly. It works fine, when I start the timer but when I forward by n seconds, it sometimes goes by n and sometimes by n+1 or n+2 and when I rewind by n it goes back at its own will.

I just cannot get the logic correct.

Called when starttimer is clicked: (It starts the clock from 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;
                                }
                            });

When video is forwarded or rewinded: (I also have a control, wherein I could move the video forward by 3 seconds or back by 3 seconds by pressing shift+r and shift+l. I hope it is equivalent to 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. Set the offfset
2. Use offset for moving mtimer back and forth
3. clearinterval when seeking

starttimer function:

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

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

You need to sync your two timer variables when you start the timer. The mtimer variable starts counting the seconds when you start the timer, but lastCurrentTime is set to zero until the first time you 'seek' the video one direction or another. This is going to throw the timing off.

Let's say you start the timer one minute into the video. Once you have watched the video for a minute, mtimer is at 60 seconds, the video timer is at 120 seconds, and lastCurrentTime is still at zero. If I roll the video back by 90 seconds, mtimer should go negative by thirty seconds, but, based on your code, mtimer will be set to positive 30.

Try this:

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

Now, your current seeking function should work. If the newCurrentTime is larger than the lastCurrentTime, mtimer will be advanced by the difference. If the opposite is true, then mtimer will be reduced by the difference. In the case I mentioned above, when mtimer should have gone negative by thirty seconds, mtimer would be set to zero. Based on your code, I'm assuming you want the timer reset if mtimer goes below zero.

Hope this fits your needs.