video seeking is not working in react player

Question

I'm writing an educational website using react.js As a part of my website, I need to play a video. In this regard I use the ReactPlayer package. The codes are as follows:

import React from 'react'
import ReactPlayer from 'react-player'

function VideoPlayer({ url }) {
  console.log(url)
  return (
    <div>
      <ReactPlayer url={url} controls={true} width={'100%'} style={{ maxWidth: '1000px' }} />
    </div>
  )
}

export default VideoPlayer

The player buffers the video (referenced by URL), but the video is not seekable. It seems that the player buffers the file, but I'm not able to forward the video (my video files are all Mp4). Am I doing anything wrong? please help me to solve the problem.

Have you found any solution for this issue yet? – scary_devil Mar 13 '23 at 08:29 — scary_devil, Mar 13 '23 at 08:29
Joining the question. Experiencing the same issue. – dani_l_n Apr 13 '23 at 14:05 — dani_l_n, Apr 13 '23 at 14:05

score 0 · Answer 1 · answered Mar 17 '23 at 08:41

As of v2.2, if your build system supports import() statements, use react-player/lazy to lazy load the appropriate player for the url you pass in. This adds several reactPlayer chunks to your output, but reduces your main bundle size.

import ReactPlayer from 'react-player/lazy'

check the docs for migrating to version 2+

https://github.com/CookPete/react-player/blob/HEAD/MIGRATING.md

Shankaja Aroshana · Answer 2 · 2023-03-13T09:20:39.050

You would have to create a seeker by your-self cause react-player dont't has one. I've added some learning materials you could use.

As a starting point use useRef hook to get the reference to access every function that react-player supports.

const videoPlayerRef = useRef()
<ReactPlayer
    ref={videoPlayerRef}
    [.....]        
    />

Working code is longer to put in here .please checkout the repository

Source code with all the functionalities above. https://github.com/wesley-codes/React-player

video seeking is not working in react player

2 Answers2