如何让计时器每秒发痒,并在转发或重新播放视频时跳转？

Question

我正在尝试制作一个间接与视频同步的计时器.当starttimer被点击,就应该开始我的定时器和发痒每一秒.

这是过程:

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'

但我的计时器,功能不正常.它工作得很好,当我启动计时器但是当我向前推进n几秒钟时,它有时会过去n,有时候会被n+1或者n+2当我倒回n它时它会自行返回.

我只是无法得到正确的逻辑.

starttimer单击时调用:(从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;
                                }
                            });

当转发或重新播放视频时:(我也有一个控件,其中我可以通过按Shift + r和shift + l将视频向前移动3秒或向后移动3秒.我希望它相当于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. 设置偏移量
2. 使用 offset 来回移动 mtimer
3. 查找时清除间隔

starttimer功能：

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

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