I keep trying to use the seekTo() method on the ReactPlayer but it keeps telling me this is undefined.
function VideoPlayer({
endVideo,
timePlayed,
controls,
playing,
videoDuration
}) {
return (
<div className="video-player">
<ReactPlayer
ref={(player) => {
this.player = player;
}}
url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
playing={playing}
// playing={true}
controls={controls}
onStart={() => this.player.seekTo(timePlayed)}
onEnded={endVideo}
/>
</div>
);
}
Why are you using this in an arrow function?
Try this:
import React from "react";
import ReactPlayer from "react-player";
let player;
export const VideoPlayer = ({
endVideo,
timePlayed,
controls,
playing,
videoDuration
}) => (
<div className="video-player">
<ReactPlayer
ref={(ref) => {
player = ref;
}}
url="https://res.cloudinary.com/amarachi-2812/video/upload/v1630370229/videoplayback_1_pr2hzi.mp4"
playing={playing}
// playing={true}
controls={controls}
onStart={() => player.seekTo(timePlayed)}
onEnded={endVideo}
/>
</div>
);
export const MemoizedVideoPlayer = React.memo(VideoPlayer);
Try, set instance with help useState hook.
Wrap the handlers in useCallback to prevent unnecessary re-render, but don't forget about their dependencies if they appear.
Do not forget to look at the repository of the libraries you are using, sometimes it helps.
Also, my advice is to read about functions in more detail.
Additionally, I made a few small changes.
Let's start!
import React, { useState, useCallback } from "react";
import ReactPlayer from "react-player";
export const VideoPlayer = ({ url, onEnded, timePlayed, controls, playing, duration}) => {
const [instance, setInstance] = useState(null);
const handleStart = useCallback(() => {
if (instance) {
instance.seekTo(timePlayed)
}
}, [instance, timePlayed])
return (
<div className="video-player">
<ReactPlayer
ref={setInstance}
url={url}
playing={playing}
controls={controls}
onStart={handleStart}
onEnded={onEnded}
/>
</div>
)};