CODEWITHSUNDEEP
javascriptreactjsreact-player
Alan Abraham
Alan Abraham

Reputation: 281

React.js - react-player how to play local video

I am currently trying to play a video on local host in react.js. I am using the react-player module to create a video player component. I am able to play videos using urls such as youtube and facebook links but I am unable to use local videos using the filepath. I read through all of the documentation on github for the module but I was unable to find an answer, which is why I am here asking you this question. Below is my code :

import React, { Component } from 'react'
import ReactPlayer from 'react-player'



class Video extends Component {
    render () {
      return (
        <div className='player-wrapper'>
          <ReactPlayer
            className='react-player fixed-bottom'
            url= 'M_03292018202006_00000000U2940605_1_001-1.MP4'
            width='100%'
            height='100%'
            controls = {true}

          />
        </div>
      )
    }
  }

  export default Video;

Upvotes: 28

Views: 87995

Answers (6)

Nguyễn Văn Th&#224;nh
Nguyễn Văn Th&#224;nh

Reputation: 1

note that video will show when you build production. develop isn't.

Upvotes: 0

Joe Shakely
Joe Shakely

Reputation: 913

Just use the Video HTML element. ReactPlayer didn't work because I couldn't get the thumbnail to show correctly. (poster attribute works perfectly).

Example:

import React, { Component } from 'react'

class Video extends Component {
    render() {
        return (
                <div className='player-wrapper'>
                <video controls
                    src='/Slam Dunk Contest 2008.mp4'
                    poster='https://user-images.githubusercontent.com/28612032/172026551-e5a96748-d724-4a08-b6b3-f44655d4ef39.png'
                    width="820">

                    Sorry, your browser doesn't support embedded videos,
                    but don't worry, you can <a href="https://user-images.githubusercontent.com/28612032/172026908-7c33e4cc-ebe5-40de-b9cc-009d12a7ced2.mp4">download it</a>
                    and watch it with your favorite video player!

                </video>
                </div>
        )
    }
}

export default Video;

Upvotes: 3

Abhishek Kumar
Abhishek Kumar

Reputation: 900

Main Catch: All the statics should placed inside the public folder. Any video, audio, images, etc.

Why?
Public folder will not be processed by Web-pack and hence remains untouched and you could see it as it is. Placing it anywhere else would be processed and tweaked and optimised by webpacks, thus may change the compression, or extensions of video file that result in unproper parsing of code (though it is not seen with images, videos get affected by it).

How to access public folder from code?
Every file url is pointed to public folder. Every file url with ./ is pointed to file directory.
To access public/video1.mp4 just write url='video1.mp4'.

eg.

            <ReactPlayer playing url='video1.mp4'
                height='500px'
                width='800px'
                controls='true'
            />

Upvotes: 9

sivarasan
sivarasan

Reputation: 330

you have to create video object URL.

import React, { useState } from "react"; 
import ReactPlayer from "react-player";

 const [videoFilePath, setVideoFilePath] = useState(null);


const handleVideoUpload = (event) => {
setVideoFilePath(URL.createObjectURL(event.target.files[0]));
};

....

<input type="file" onChange={handleVideoUpload} />

...

<ReactPlayer url={videoFilePath} width="100%" height="100%" controls={true} />

Upvotes: 19

NinaW
NinaW

Reputation: 658

You would need to import the local video file to you component. 

import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-1.MP4'

class Video extends Component {
  render () {
    return (
      <div className='player-wrapper'>
        <ReactPlayer
          url={myVideo}
          // ...
        />
      </div>
    )
  }
}

```

Upvotes: 7

AWolf
AWolf

Reputation: 8980

With a Create React App (short CRA) you could place your video files in the public folder e.g. in a subfolder videos. Then you can access that static file as you did it in your code. enter image description here

CRA will just copy the files to the final static page as mentioned in the docs.

If you don't use a CRA setup you need to copy your video to the final bundle e.g. by using Webpack.

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class Video extends Component {
    render () {
        return (
        <div className='player-wrapper'>
            <ReactPlayer
            className='react-player fixed-bottom'
            url= 'videos/demo_video.MP4'
            width='100%'
            height='100%'
            controls = {true}

            />
        </div>
        )
    }
}

export default Video;

Upvotes: 24

Related Questions