javascript - 具有范围滑块角度的自定义进度条

Question

我正在为 ngx-plyr 创建一个自定义 progerssbar 控件，它正在工作，但存在一个错误，用户有时需要单击进度条 2-3 次才能更改要更改的视频时间。你可以在这里看到它https://bory-webspeech.netlify.app

这是我设法模拟进度条的方法

 updateTime(e) {
    this.plyr.toArray().forEach((plyr) => {
      const lastTime = plyr.player.currentTime;
      try {
        plyr.player.pause();
        this.isPlayed = false;
        plyr.player.currentTime = parseFloat(e.target.value);
        this.time = e.target.value;

        this.remaining = this.parse(
          plyr.player.duration - this.time
        );
      } catch (error) {
        console.log(error);
      }
      plyr.player.on("canplay", () => {
        if (plyr.player.currentTime != lastTime) {
          setTimeout(function () {
            console.log('play');
            plyr.player.play();
          }, 250);
        } else {
          console.log('dont play');
          plyr.player.currentTime = parseFloat(e.target.value);
          this.time = e.target.value
        }
      });
    });
  }

我哪里做错了？