Timestamp URL shortcut does not work

[lil0r]

Describe the issue Expected to be able to link to specific timestamp in video by adding URL parameter

To Reproduce Steps to reproduce the issue:

1. Go to any video and play
2. Perform action, add "&t=60" to the URL
3. Error, video stops, on hitting play video starts from the beginning

Expected behavior video to jump to 60 seconds mark

Environment (please complete the following information):

• OS: 20.04.05 LTS
• Installation method: single server install
• Browser Multiple: Edge Version 108.0.1462.54 (Official build) (64-bit)

Additional context Add any other context about the problem here.

[mgogoulos]

Thanks for opening, I also noticed this myself recently that this stopped working!

[Mikzas]

I'm in the same situation.

[jp-rad]

Change the loadedmetadata event to the playing event, and then get around it for now. But no autoplay.

https://github.com/mediacms-io/mediacms/blob/main/frontend/src/static/js/components/video-player/VideoPlayer.jsx#L195

[jp-rad]

Time setting is held off until a canplay event occurs, function currentTime.

v1.8 - 7.20.2 video.js (L.L.25427-25456)

    /**
     * Get or set the current time (in seconds)
     *
     * @param {number|string} [seconds]
     *        The time to seek to in seconds
     *
     * @return {number}
     *         - the current time in seconds when getting
     */
    ;

    _proto.currentTime = function currentTime(seconds) {
      if (typeof seconds !== 'undefined') {
        if (seconds < 0) {
          seconds = 0;
        }

        this.techCall_('setCurrentTime', seconds);
        return;
      } // cache last currentTime and return. default to 0 seconds
      //
      // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
      // currentTime when scrubbing, but may not provide much performance benefit afterall.
      // Should be tested. Also something has to read the actual current time or the cache will
      // never get updated.

      this.cache_.currentTime = this.techGet_('currentTime') || 0;
      return this.cache_.currentTime;
    }

v1.9 - 7.20.2 video.js (L.L.27087-27124)

    /**
     * Get or set the current time (in seconds)
     *
     * @param {number|string} [seconds]
     *        The time to seek to in seconds
     *
     * @return {number}
     *         - the current time in seconds when getting
     */
    ;

    _proto.currentTime = function currentTime(seconds) {
      if (typeof seconds !== 'undefined') {
        if (seconds < 0) {
          seconds = 0;
        }

        if (!this.isReady_ || this.changingSrc_ || !this.tech_ || !this.tech_.isReady_) {
          this.cache_.initTime = seconds;
          this.off('canplay', this.boundApplyInitTime_);
          this.one('canplay', this.boundApplyInitTime_);
          return;
        }

        this.techCall_('setCurrentTime', seconds);
        this.cache_.initTime = 0;
        return;
      } // cache last currentTime and return. default to 0 seconds
      //
      // Caching the currentTime is meant to prevent a massive amount of reads on the tech's
      // currentTime when scrubbing, but may not provide much performance benefit afterall.
      // Should be tested. Also something has to read the actual current time or the cache will
      // never get updated.

      this.cache_.currentTime = this.techGet_('currentTime') || 0;
      return this.cache_.currentTime;
    }

video.js L.L.24845-24847

    _this.boundApplyInitTime_ = function (e) {
      return _this.applyInitTime_(e);
    };

video.js L.L.27132-27134

    _proto.applyInitTime_ = function applyInitTime_() {
      this.currentTime(this.cache_.initTime);
    }

[jp-rad]

Change the loadedmetadata event to the canplaythrough event that occurs after the canplay event

https://github.com/mediacms-io/mediacms/blob/main/frontend/src/static/js/components/video-player/VideoPlayer.jsx#L195

    player.player.one('canplaythrough', () => {       
      const urlParams = new URLSearchParams(window.location.search);
      const paramT = Number(urlParams.get('t'));
      const timestamp = !isNaN(paramT) ? paramT : 0;
      player.player.currentTime(timestamp);
    });

[KyleMaas]

See #928