Question 72668 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How can I play local video files with react? – Reactjs

I am trying to create a website which allows users to play video files from anywhere on their system using React.

If I use the video tag as:

<video className='myVideo' src="/home/tashif/Downloads/CSS/1.mp4" controls autoPlay> </video>

The video just won’t load!

If I use the tag as:

  <video className='myVideo' src={require("/home/tashif/Downloads/CSS/1.mp4")} controls autoPlay> </video>

I get the following error:

Module not found: Error: You attempted to import
/home/tashif/Downloads/CSS/1.mp4 which falls outside of the project
src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from
project’s node_modules/.

I want to:

  • Change the src prop, so, that should be a variable
  • load video files from anywhere on the system and not be limited to a particular location

Is this possible with react? Or, should I switch back to Javascript?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I came up with a workaround.

    1. Create an express server to copy the local file from anywhere on the drive to the project's folder.

      fs.copyFileSync('from','to');

    2. Use the Video tag as:

      <video src={require("location of the video after being copied/video.mp4")} controls autoplay>

    Remember: Your video can be from anywhere, but, make sure to copy it to the same location and same name, video.mp4, as mentioned in the require(...) function.


  2. 0

    First of all, put the video file inside your project public directory

    for example for a video located in the folder /public/assets/video.mp4

    <video width="320" height="240" controls autoPlay>
    <source src="/assets/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search