Ref.current.seekTo is not a function

[Marmsilso]

I am using react-player with next.js and typescript and i cant use the seekTo function

Im using:

• next 13.0.5
• react 18.2.0
• react-player 2.11.0
• typescript 4.8.4

I tried to use Ref.current.seekTo and it threw this error: Ref.current.seekTo is not a function

then i followed two solutions and nothing worked :(

My code for this solution: #1548 (comment)

• player-page.tsx:

import React, { useRef } from "react";
import { NextPage } from "next";
import { ReactPlayerProps } from 'react-player'
import dynamic from "next/dynamic";

const ReactPlayerComponent = dynamic<ReactPlayerProps>(
    () => import("./ReactPlayerComponent").then(r => r.ReactPlayerComponent), //<- it throws an error: Property 'ReactPlayerComponent' does not exist on type 'typeof import("c:/project/pages/ReactPlayerComponent")'
    {
        ssr: false
    }
);

const PlayerPage: NextPage = () => {
    const playerRef = useRef<ReactPlayerProps>(null);

    return (
        <ReactPlayerComponent playerRef={playerRef} />
    )
}

export default PlayerPage

• ReactPlayerComponent.tsx:

import React from "react";
// import { NextPage } from "next";
import { ReactPlayerProps } from 'react-player'
import dynamic from "next/dynamic";
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });

const ReactPlayerComponent: React.FC<ReactPlayerProps> = ({
    playerRef,
}) => {
    return (
        <ReactPlayer
            ref={playerRef}
            url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
            controls
        />
    );
};

export default ReactPlayerComponent

My code for this solution: #1455 (comment)

• player_page2.tsx:

import React, { useState, useRef } from "react";
import { NextPage } from "next";
import dynamic from "next/dynamic";
import { ReactPlayerProps } from 'react-player'
const VideoPlayer = dynamic(() => import("./VideoPlayer"), { ssr: false });

const PlayerPage: NextPage = () => {
    const [playing, setPlaying] = useState(true);

    const playerRef = useRef<ReactPlayerProps>(null);

    return (
        <div>
            <div>
                <VideoPlayer playerRef={playerRef} playing={playing} url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
            </div>
            <div>
                <div className="cursor-pointer" onClick={() => setPlaying(true)}>Play</div>
                <div className="cursor-pointer" onClick={() => setPlaying(false)}>Pause</div>
                <div className="cursor-pointer" onClick={() => playerRef.seekTo(10)} > To 10 Seconds</div>
            </div>
        </div>
    )
}

export default PlayerPage

• VideoPlayer.tsx

import React, { useState, useRef } from "react";
import { NextPage } from "next";
import dynamic from "next/dynamic";
const ReactPlayer = dynamic(() => import('react-player'), { ssr: false });

interface Player {
    playerRef: any,
    playing: boolean,
    url: string
}

const VideoPlayer: NextPage<Player> = (props) => {

    return (
        <ReactPlayer
            ref={props.playerRef}
            muted
            playing={props.playing}
            controls
            url={props.url}
        />
    )
}

export default VideoPlayer

Any help would be much appreciated.
Thank you in advance.

[georgebutter]

I am also still experiencing this issue on 2.12.0

[jissereitsma]

In my case, the ref is containing a child object current which then contains seekTo. Did you try that?

[EllaZhao]

I ran into a similar problem, and I used a hack way to get around it for now. Just FYI.

export default function VideoPlayer({url, onProgress, seekTime}) {
    const [player, setPlayer] = useState(null);

    useEffect(() => {
        player?.seekTo(seekTime)
    }, [seekTime])

    return (
        <Player
            url={url}
            controls
            loop
            playsinline
            playing
            progressInterval={150}
            stopOnUnmount={true}
            onProgress={onProgress}
            onReady={(e) => {
                setPlayer(e['player']);
            }}
        />
    );
}

[Marmsilso]

I ran into a similar problem, and I used a hack way to get around it for now. Just FYI.

export default function VideoPlayer({url, onProgress, seekTime}) {
    const [player, setPlayer] = useState(null);

    useEffect(() => {
        player?.seekTo(seekTime)
    }, [seekTime])

    return (
        <Player
            url={url}
            controls
            loop
            playsinline
            playing
            progressInterval={150}
            stopOnUnmount={true}
            onProgress={onProgress}
            onReady={(e) => {
                setPlayer(e['player']);
            }}
        />
    );
}

it worked! thank you so much!

If I end up finding a better way il post the solution here.