Computing this.player.getCurrentTime()

Hi, thanks a lot for this wrapper for the Youtube API.

I’m having some trouble figuring out how to display a timestamp in my UI that updates as the video is playing (00:01, …), because using setTimeout doesn’t work due to this.player.getCurrentTime() being a Promise.

Any idea on how to do this?

[anteriovieira]

Hi @sergiocastrovale , try:

<youtube ... ref="youtube" @playing="playing" @paused="paused"/>

<span>{{ time }}</span> <span>{{ progress }} %</span>

export default {
  // ...
  data() {
    return {
      time: '00:00',
      progress: 0,
      processId: null,
    }
  },
  computed: {
    ply() {
      return this.$refs.video.youtube;
    },
  },
  methods: {
    async playing() {
      let totalTime = await this.ply.getDuration();

      this.processId = setInterval(() => {
        this.ply.getCurrentTime().then((time) => {
          let progress = (time / totalTime) * 100;

          this.progress = progress < 100 ? progress : 100;
          this.updateTime(time + 1);
        });
      }, 100);
    },

    updateTime(time) {
      time = Math.round(time);
      let minutes = Math.floor(time / 60);
      let seconds = time - minutes * 60;

      seconds = seconds < 10 ? '0' + seconds : seconds;
      minutes = minutes < 10 ? '0' + minutes : minutes;

      this.time = minutes + ':' + seconds;
    },

    pauseVideo() {
      this.ply.pauseVideo();
    },

    paused() {
      clearInterval(this.processId);
    }
  }
}

[sergiocastrovale]

@anteriovieira that worked perfectly. Thanks a lot!