如何使计时器每秒挠痒痒，并在转发或倒带视频时使其跳跃

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

本文关键字：倒带 视频 跳跃 转发 计时器 何使      更新时间：2023-09-26

我正在尝试制作一个间接与视频同步的计时器。单击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; 
            });
  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;
                                    } 
            });

启动计时器时，您需要同步两个计时器变量。当您启动计时器时，mtimer变量开始计算秒数，但lastCurrentTime设置为零，直到您第一次"搜索"视频一个方向或另一个方向。这将打乱时机。

假设您在视频中一分钟启动计时器。观看视频一分钟后，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。

希望这符合您的需求。

相关文章：