CODEWITHSUNDEEP
reactjsvideo-playerreact-player
Sadegh Eskandari
Sadegh Eskandari

Reputation: 400

video seeking is not working in react player

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.

Upvotes: 2

Views: 2046

Answers (2)

Nikos Pountzas
Nikos Pountzas

Reputation: 54

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

Upvotes: 0

Shankaja Aroshana
Shankaja Aroshana

Reputation: 579

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 enter image description here

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

Upvotes: -2

Related Questions