setCurrentTime method is not working properly

[palak-convivity]

I am using Next.js and have integrated Player.js with it. This setup is causing an issue when I try to seek to a particular timestamp. Sometimes it navigates to that specific timestamp, but other times it resets the time to 0 whenever I refresh the page.

So, I tried putting the 'ready' function inside a setTimeout function. Now, it's working okay, but it's not an appropriate approach.
Maybe the issue is with the trigger of the ready function because it seems unable to perform the setCurrentTime function.
Here, is the code I am using:

import React, { useEffect, useRef, useState } from 'react'
import playerjs from 'player.js'

interface TimeUpdateProps {
 seconds: number
 duration: number
}

interface PlayerComponentSpecificProps {
 id: string
 onTimeUpdate?: (data: TimeUpdateProps) => void
 resumeTime?: number
}
type PlayerComponentProps = PlayerComponentSpecificProps &
 React.IframeHTMLAttributes<HTMLIFrameElement>

const PlayerComponent: React.FC<PlayerComponentProps> = ({
 id,
 onTimeUpdate,
 resumeTime, 
 ...iframeProps
}) => {
 const playerRef = useRef<HTMLIFrameElement>(null)

 useEffect(() => {
  if (playerRef.current) {
     const newPlayer = new playerjs.Player(playerRef.current)

     const handleReady = () => {
       
       console.log('Player is ready', resumeTime)
       setTimeout(() => {
         if (resumeTime) {
           newPlayer.setCurrentTime(resumeTime)
         }
       }, 1000)
       newPlayer.setCurrentTime(resumeTime)
     }

     newPlayer.on('ready', handleReady)
     newPlayer.on('timeupdate', (data: TimeUpdateProps) => {
       console.log('timeupdate', JSON.stringify(data))
       if (onTimeUpdate) {
         onTimeUpdate(data)
       }
     })

     return () => {
       newPlayer.off('ready', handleReady)
     }
   }    }
 }, [id])

 return (
   <div>
     {resumeTime}
     <iframe ref={playerRef} id={id} {...iframeProps} />
   </div>
 )
}

export default PlayerComponent

[Sopamo]

We are experiencing the same issue in a Vue.js (2) project. This is the relevant code:

  const player = new playerjs.Player(this.$refs.iframe)

  player.on('ready', () => {
    this.player = player
    this.player.setCurrentTime(this.getCurrentTime())

    this.player.on('timeupdate', (data) => {
      this.setVideoCurrentTime(data.seconds)
    })
    this.player.on('ended', () => {
      this.removeVideoCurrentTime()
    })
    if (this.shouldPlay) {
      this.player.play()
    }
  })

[notAPanda]

I am also trying to set setCurrentTime after the player is ready.
It's not working. I am checking the player.getCurrentTime() after using setCurrentTime and nothing changes.

[splendidrob]

Did anyone find a solution to this? I had it working previously but it suddenly seems to have stopped working for me:

continuePlayingButton.addEventListener('click', function() {
      player.setCurrentTime(100);
      player.getCurrentTime(value => console.log('getCurrentTime:', value));
      player.play();
});

console log is 0

[splendidrob]

After playing around with this today I found that the issue seems to be with preloading. If i set preload to true on the video embed then setCurrentTime seems to work fine. If I set it to false then it no longer works.

Working example:

<iframe src="https://iframe.mediadelivery.net/embed/xxxxxx/xxxxx?autoplay=false&loop=false&muted=false&preload=true&responsive=true" loading="lazy" style="border:0;position:absolute;top:0;height:100%;width:100%;" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;" allowfullscreen="true"></iframe>

Hope that helps someone else!