如何使计时器每秒滴答作响并在转发或倒带视频时使其跳转？

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. 使用偏移量来回移动 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;
                                    } 
            });

Answer 2

您需要在启动计时器时同步您的两个计时器变量。当您启动计时器时，mtimer 变量开始计算秒数，但 lastCurrentTime 设置为零，直到您第一次 'seek' 视频一个方向或另一个方向。这将推迟时间。

假设您在视频播放一分钟后开始计时。观看视频一分钟后，mtimer 为 60 秒，视频计时器为 120 秒，而 lastCurrentTime 仍为零。如果我将视频后退 90 秒，mtimer 应该会减少 30 秒，但是根据您的代码，mtimer 将设置为正 30。

试试这个：

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

现在，您当前的搜索功能应该可以使用了。如果 newCurrentTime 大于 lastCurrentTime，mtimer 将按差值前进。如果相反，则 mtimer 将减少差异。在我上面提到的情况下，当 mtimer 应该在三十秒后变为负值时，mtimer 将被设置为零。根据您的代码，我假设您希望在 mtimer 低于零时重置计时器。

希望这能满足您的需求。