I have an issue with a React Functional Component which is a video player. I need to call a function called onEnded
from the video players ended
event. The function is a callback that is being passed into the component, as well as a number value videoId
. Here’s my code:
const handlePlayerReady = (player) => {
playerRef.current = player;
// You can handle player events here, for example:
player.on('waiting', () => {
videojs.log('player is waiting');
});
player.on('playing', () => {
videojs.log('player is playing');
});
player.on('ended', () => useCallback(() => {
console.log('exit video container :', videoId);
onEnded(videoId);
}));
player.on('dispose', () => {
videojs.log('player will dispose');
});
};
I am convinced that this is to do with scope because if I call onEnded(videoId)
from outside of the event handler, then it is called and the videoId
is the value I expect. If I run it as it is above, the videoId
value is undefined
but the callback is called.
The only other thing that it could be is that the handlePlayerReady
is called before videoId
is set.
Can anyone shed some light on why the method is called but the parameter is not read?