Video tag on react with create-react-app project

Question

I am having problem adding a local video to my project as

<video src={import(src/assets/abc.mp4)} type="video/mp4"/>

I have researched and found out about

web pack configuration

to make this possible but i can't figure out how to introduce it to create-react-app project.

I can't go cloud hosting for my videos because i need it on mobile version as well.please can anyone help?

Answer 1

The syntax you’re trying to use (dynamic import()) is for code splitting, not for adding files.
I’m not sure why you were looking for Webpack configuration, as this is supported out of the box.

Please follow the official documentation that explains how to import assets:

// Assuming abc.mp4 is in the same folder as this component
import myVideo from './abc.mp4';
// This will become a string with the path to the video at build time

// Your component definition
export default function MyComponent() {
  return <video src={myVideo} type="video/mp4" />;
}