How to embed a LOCAL video on a div background in React

Question

I am trying to embed a LOCAL video on a div background in React but it's not working. In fact, when I embed a URL video, it works, but not from LOCAL file. Is there something special to make this background video work in React?

Results

DO WORK --> https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

DO NOT WORK --> ./assets/videos/show.mp4 (the path is correct)

EDIT: I inserted controls property and have found out that the video exists, but it plays in blank screen. Any help would be appreciated.

.video-container {
  height: 100vh;
  position: relative;
  width: 100vw;
}

.video-container video {
  height: 100%;
  object-fit: cover;
  position: fixed;
  width: 100%;
  z-index: 0;
}

<div className="video-container">
  <video autoPlay muted loop id="video">
    <source src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} type="video/mp4" />
  </video>
</div>

Using local video usually isn't the right approach. Why don't you like the working version? — picklepick, Feb 23 '22 at 11:55
In what way does it fail? Is there any error in the browser console? On the network tab of the browser debugging tools, is there a request for the video file? What is the server’s response? (There also appears to be an errant closing curly brace in your markup, which implies the possibility of a typo in one of your attempts…) — David, Feb 23 '22 at 11:56
I guess not. It should be ok since it's an resource from the own page. I need to get local file. The URL video is just a sample from anywhere. — Kelson Batista, Feb 23 '22 at 11:57
Answered here: https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video (answer is a copy paste of this thread) — picklepick, Feb 23 '22 at 11:58
@David no error in console, no request. Simple video background as shown. — Kelson Batista, Feb 23 '22 at 12:01

score 0 · Answer 1 · answered Feb 23 '22 at 11:57

0

Apparently this is a path resolver problem with NodeJS and React compilation. Try to import your video as:

import myVideo from './assets/videos/show.mp4';

<div className="video-container">
  <video autoPlay muted loop id="video">
    <source src={myVideo} type="video/mp4" />
  </video>
</div>

If this not work, try to put the video inside public folder, this will let the video available after the React compilation.

answered Feb 23 '22 at 11:57

Ary Barros

307
2
10

Already tried this as well and still not working. By the way, video on public folder pops an error: Module not found: You attempted to import ../public/assets/videos/show.mp4 which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. – Kelson Batista Feb 23 '22 at 12:20
as far as I remember, if you store content in your public folder - you will need to use it as a URL and not an import. eg `yourAppUrl/path/to/video`. Some more info here https://create-react-app.dev/docs/using-the-public-folder/ – GBourke Feb 23 '22 at 13:33
The module not found error is because your react (webpack) is not prepared to handle an mp4 video. Try this solution that adds the webpack loader to react: https://stackoverflow.com/questions/36465127/how-to-load-a-local-video-in-react-using-webpack – Ary Barros Feb 23 '22 at 17:30

score 0 · Accepted Answer · answered Feb 23 '22 at 15:08

First of all, thanks for everyone who tried to help me.

After inserting "controls" for video attribute, I noticed that the video was playing in background, but just BLANK (white video with controls). I followed some instructions from another post to config 'file-loader' for mp4 format. I did, but after the procedure still not worked.

Webpack 3 locates .mp4 file but video is not playable

Next, I rendered a new video file and then worked. So I can't clearly identify the source of the problem. I guess something happen on the first time I rendered the file, so probably was the VIDEO FORMAT.

For file rendering I used: Kdenlive for Linux Video HD 1080p 25 fps render format: Generic (HD for web) > MP4-H264/AAC

Hope this can give a new approach for those with the same problem.

How to embed a LOCAL video on a div background in React

2 Answers2