播放器控制栏在到达滑块末端之前达到0:00

Question

我正在开发自定义youtube播放器应用程序。对于progressbar，我正在使用html5的输入类型范围，bootstrap最新版本也支持该类型。我正在使用React开发这个应用程序。

然后视频短于2分钟，

这是我目前的代码部分

formatTime(time){
    const date = new Date(time * 1000);
    let hours = date.getUTCHours();
    let minutes = date.getUTCMinutes();
    let seconds = ('0' + date.getUTCSeconds()).slice(-2);

    if(hours){
      minutes = ('0' + date.getUTCMinutes()).slice(-2);
      return `${hours}:${minutes}:${seconds}`
    }
    //console.log(`${minutes}:${seconds}`);
    return `${minutes}:${seconds}`
  }
  
  updateTimer() {
    if (this.player.target){
      this.currentTime.current.innerText =
        this.player.target.getDuration() >= this.player.target.getCurrentTime()
          ? this.formatTime(
              this.player.target.getDuration() -
                this.player.target.getCurrentTime()
            )
          : this.formatTime(0);
          
          }
    // this.duration.current.innerText = this.formatTime(this.player.target.getDuration());
  }

  updateProgressBar() {
    if (this.player.target) {
      this.range.current.value =
        Math.round((this.player.target.getCurrentTime() /
          this.player.target.getDuration()) *
        100);
      //  console.log(this.range.current.value);   
    }
  }

任何人都可以向我建议如何避免此问题，以便只有在滑块结束时视频才可以到达0:00。