[Bug] playerRef attribute is not a valid Ref

[kostas-pblworks]

Bug Report

Describe the bug

When passing a playerRef attribute, it doesn't behave as a regular ref. Example:

I believe the problem is lying on playerRef being asynchronously set when the Cloudinary library has finally loaded.

Is this a regression?

Im not sure.

Steps To Reproduce the error

const videoRef = useRef()
const playerRef = useRef()

useEffect(() => {
  // videoRef is defined and attached to the video element
  // playerRef is not defined
}, [])

<CldVideoPlayer
  videoRef={videoRef}
  playerRef={playerRef}
  // ...
  />

Expected behaviour

To be able to watch for when the playerRef has been initialized. For example, the following should be working:

const videoRef = useRef()
const playerRef = useCallback(player => { 
  // do something with the player 
}, [])

<CldVideoPlayer
  playerRef={playerRef}
  // ...
  />

I'm not sure about the proper solution here but I believe the useimperativehandle could help here.

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS: MacOS Sonoma
• Node version: 18
• Npm version:
• Browser name and version: Chrome

Additional context

Just to give some context on what I'm trying to do, I would like access to the Cloudinary video player in order to attach to more events (e.g. percentsplayed) to track to an Analytics service.

[Figumari]

I have the same problem and am looking for a solution to access percentsplayed as well.

[SK1965]

Hello! @jlooper-cloudinary, I would like to work on this issue for Hacktoberfest 2025. Could you please assign it to me?

I have successfully reproduced the bug locally and have a clear plan to fix it using forwardRef and useImperativeHandle as suggested. Thank you!

[jlooper-cloudinary]

hi @SK1965 - we are not assigning items, just please post a PR and we'll take a look, thanks

[SK1965]

Hi @jlooper-cloudinary ,

Thanks for the clarification! I’ve submitted a Pull Request fixing the bug with the playerRef. Instead of the old prop, the component now uses a forwarded ref via forwardRef and useImperativeHandle, ensuring the parent can reliably access the player instance and attach events.

Looking forward to your review. Thank you!

[eportis-cloudinary]

I'm able to reproduce the basic case (playerRef.current is undefined within a useEffect). If you can, @Figumari or @kostas-pblworks, could you share an example of exactly how you are trying/failing to use percentsplayed events?

Thanks!

[jlooper-cloudinary]

@eportis-cloudinary does the PR solve the problem?

[eportis-cloudinary]

@jlooper-cloudinary Yes, but I'm still not clear on the use case for needing a ref before the element exists. See my comments on the PR.