Question: Ref.seekTo is not a function
See original GitHub issueI am using react-player with my next.js site and am having trouble using seekTo function. It results in error saying: “playerRef.seekTo is not a function”
I tried “playerRef.current.seekTo(parseFloat(e.target.value))” as well but same error occurs
This was my code:
import { useRef } from "react";
const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
const Player = ({url}) => {
const playerRef = useRef();
const [player, setPlayer] = useState({
playing: true,
muted: true,
played: 0,
loaded: 0,
duration: 0,
seeking:false
});
const handlePlayPause = function () {
setPlayer({ ...player, playing: !player.playing });
};
const handleMuted = () => {
setPlayer({ ...player, muted: !player.muted });
};
const handleSeekMouseDown = (e) => {
setPlayer({ ...player, seeking: true });
};
const handleSeekChange = (e) => {
setPlayer({ ...player, played: parseFloat(e.target.value) });
};
const handleSeekMouseUp = (e) => {
setPlayer({ ...player, seeking: false });
playerRef.seekTo(parseFloat(e.target.value));
};
const handleProgress = (state) => {
if (!player.seeking) {
setPlayer(state);
}
};
return (
<div
className={`relative justify-center content-center w-full`}
>
<ReactPlayer
ref={playerRef}
className="absolute rounded"
width="100%"
height="100%"
url={url}
volume={1}
playIcon={<></>}
playing={player.playing}
loop={true}
muted={player.muted}
onProgress={handleProgress}
></ReactPlayer>
<div
className={"absolute w-full h-full"}
onClick={handlePlayPause}
></div>
<div>
<input
type="range"
min={0}
max={0.999999}
step="any"
value={player.played}
onMouseDown={handleSeekMouseDown}
onChange={handleSeekChange}
onMouseUp={handleSeekMouseUp}
/>
</div>
</div>
);
};
export default Player;
Even when I copy paste exact code from demo(https://github.com/cookpete/react-player/blob/master/src/demo/App.js), same error shows, I’m not sure why it happens 😦
Issue Analytics
- State:
- Created 10 months ago
- Reactions:3
- Comments:8
Top Results From Across the Web
youtube api - Player.seekTo is not a function - Stack Overflow
From the documentation of YouTube, the player.seekTo(seconds:Number, allowSeekAhead:Boolean) has two parameter that you need to set.
Read more >How to use ReactPlayer with functional component? #791
I can not use ref inside function component. ... <button onClick={() => ref.current.seekTo(10)}>Seek to 00:10</button> </div> ) }.
Read more >react-player - Bountysource
I am using react-player with my next.js site and am having trouble using seekTo function. It results in error saying: "playerRef.seekTo is not...
Read more >YouTube Player API Reference for iframe Embeds
This function loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until...
Read more >10 Essential Public Health Services - CSTLTS - CDC
The 10 Essential Public Health Services provide a framework to protect and promote the health of all people in all communities.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Try this solution
https://github.com/cookpete/react-player/issues/1455#issuecomment-1207154843
Same issue but with
showPreview()
method. The only thing that is underplayerRef.current
is a mysterious functionretry()
.I’m using
react-player@2.11.0