How can i load local video react application-CodePudding

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...

CodePudding user response：

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>
    )
   }
 }

CodePudding user response：

There would be public/ folder at the project root. Put your video.mp4 file in there and link it.

<source src="/video.mp4" type="video/mp4" />

CodePudding user response：

Try to include the video from the files inside react app:

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>

    </>
  );
};

Another solution will be locate your video in 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>

    </>
  );
};

One more is to use absolute path:

export const Welcome = () => {
  return (
    <>
      <video autoPlay loop muted>
        <source src="https://example.com/assets/video/video.mp4" type="video/mp4" />
      </video>

    </>
  );
};