Как заставить таймер щекотать каждую секунду и заставить его прыгать, когда видео пересылается или перематывается?

Я пытаюсь сделать таймер, который косвенно синхронизируется с видео. Когда нажимается 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;
                                }
                            });

Когда видео пересылается или перематывается: (У меня также есть элемент управления, в котором я мог бы переместить видео вперед на 3 секунды или обратно на 3 секунды, нажав shift + r и shift + l. Надеюсь, что это эквивалентно 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

  • Установите значение параметра fffset
  • Использовать смещение для перемещения mtimer вперед и назад
  • clearinterval при поиске

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

Ответ 2

Вам нужно синхронизировать две переменные таймера при запуске таймера. Переменная mtimer начинает отсчет секунд при запуске таймера, но lastCurrentTime устанавливается на ноль до тех пор, пока первый раз вы не будете искать видео в том или ином направлении. Это приведет к отключению времени.

Скажем, вы запускаете таймер на одну минуту в видео. Как только вы просмотрели видео в течение минуты, mtimer на 60 секунд, таймер видео на 120 секунд, а lastCurrentTime все еще на ноле. Если я вернул видео на 90 секунд, mtimer должен быть отрицательным на тридцать секунд, но на основе вашего кода 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 будет установлено на ноль. Основываясь на вашем коде, я предполагаю, что вы хотите, чтобы таймер reset, если mtimer опускается ниже нуля.

Надеюсь, это соответствует вашим потребностям.