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

【问题标题】：How to make the timer tickle each second and make it jump when video is forwarded or rewinded?如何使计时器每秒滴答作响并在视频转发或倒带时使其跳跃？
【发布时间】：2015-08-27 00:38:15
【问题描述】：

我正在尝试制作一个与视频间接同步的计时器。当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秒。希望相当于@987654330 @)

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; 

            });

【问题讨论】：

所以您想从setInterval 中发出timeupdate 事件？
您必须在视频前进和后退操作的句柄/回调中做您的加减操作。否则除了 setInterval 没有蚂蚁最好的方法。
@sunilsharma 会有什么影响？我还在 seeking 活动中这样做
那很好，你的两个变量是什么值。新当前时间，最后当前时间？？秒还是什么？
@sunilsharma 每个都保持秒数。

标签： javascript jquery html timer html5-video

【解决方案1】：

您需要在启动计时器时同步两个计时器变量。 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 低于零时重置计时器。

希望这符合您的需求。

【讨论】：

【解决方案2】：

设置偏移量
使用偏移量来回移动 mtimer
搜索时清除间隔

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

【讨论】：