I am trying to load local video file to my react app. The video file exist in repo itself. I added the path of the video file as mentioned below but video is not loading.
export const Welcome = () => {
return (
<>
<video autoPlay loop muted>
<source src="src/assets/video/video.mp4" type="video/mp4" />
</video>
</>
);
};
I am new to react world. Any suggestions...
You would need to import the local video file to you component.
import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-
class Video extends Component {
render () {
return (
<div className='player-wrapper'>
<ReactPlayer
url={myVideo}
...
/>
</div>
)
}
}
import videoFile from '../path-to-video.mp4';
export const Welcome = () => {
return (
<>
<video autoPlay loop muted>
<source src="src/assets/video/video.mp4" type="video/mp4" />
</video>
</>
);
};
public folder (within index.html and use the path like this (video is located in public/assets/video/video.mp4):export const Welcome = () => {
return (
<>
<video autoPlay loop muted>
<source src="/assets/video/video.mp4" type="video/mp4" />
</video>
</>
);
};
export const Welcome = () => {
return (
<>
<video autoPlay loop muted>
<source src="https://example.com/assets/video/video.mp4" type="video/mp4" />
</video>
</>
);
};