Блог

У меня есть следующий код (с использованием videojs)

 this.on("timeupdate", function(event) {
            previousTime = this.currentTime();
        });

        this.on("seeking", function(){
            if (this.currentTime() > previousTime){
                this.currentTime = previousTime;
            }
        });
 

Проблема в том, что, как только вы пытаетесь выполнить быструю перемотку один раз, он больше не отслеживает timeupdate на индикаторе выполнения. Я больше не могу искать на панели — даже не перематывать видео. Чего мне здесь не хватает?

Во-первых, это не стандартные методы и свойства HTMLMediaElement, поэтому я предполагаю, что вы используете какой-то фреймворк, возможно Popcorn.js ? И я предполагаю this , что относится к объекту, обертывающему ваш видеоэлемент.

Проблема в том, что вы перезаписываете currentTime метод. Если бы вы ссылались на элемент video напрямую, то вы бы искали способ, которым вы это делаете, установив currentTime свойство, например: videoElement.currentTime = previousTime . Но поскольку вы используете фреймворк, this.currentTime предполагается, что это функция, пока вы не измените ее на число.

Чтобы продемонстрировать, измените свой код следующим образом:

 this.on("seeking", function(){
    console.log(typeof this.currentTime); // 'function'
    if (this.currentTime() > previousTime){
        this.currentTime = previousTime;
        console.log(typeof this.currentTime); // 'number'
    }
});
 

При следующем запуске обработчика «timeupdate» вызов this.currentTime() выдаст ошибку, поскольку он больше не является функцией.

Вероятно, вы можете исправить это следующим образом (при условии, что вы используете Popcorn или что-то подобное):

 this.on("seeking", function(){
    if (this.currentTime() > previousTime){
        this.currentTime(previousTime);
    }
});
 

Вы также должны убедиться, что вы не устанавливаете previousTime во время поиска, поскольку «timeupdate» может сработать раньше, чем «поиск». Я не уверен, как это сделать с вашей платформой, поэтому вот ссылка на рабочий пример с использованием собственного API HTMLVideoElement:

http://jsbin.com/kilemoto/1/edit

Просто нужно было реализовать это, кажется, работает хорошо

 var elem = document.querySelector("video");
let previousTime = 0;

elem.ontimeupdate = function() {
  setTimeout(() => {
    previousTime = elem.currentTime;
  }, 1000)
}

elem.onseeking = function() {
  if (elem.currentTime > previousTime) {
      elem.currentTime = previousTime;
  }
}