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?

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?

• javascript
• reactjs
• video
• create-react-app

Share Improve this question Follow edited Apr 17, 2023 at 6:26 Woof 23411 silver badge77 bronze badges asked Jul 5, 2017 at 14:00 Asela WijesingheAsela Wijesinghe 15722 silver badges1414 bronze badges 5

• Do you know what changes you need to do to the webpack configuration? – Aftab Khan Commented Jul 5, 2017 at 14:04
• can you share your webpack? – Vikram Saini Commented Jul 5, 2017 at 14:26
• @AftabKhan since im not using webpack manually i can't find a way to configure, since react-script is running the web pack tasks inside. so if webpack config is the solution i should start by trying to add a config file which works with react-scripts. can you please guide me from there to my original issue which is local video play on my project? – Asela Wijesinghe Commented Jul 5, 2017 at 16:01
• @VikramSaini i havent tried webpack config since i can't find a way to hack the create-react-app behavior if it's the only way then i am wiling to try – Asela Wijesinghe Commented Jul 5, 2017 at 16:24
• My question was more around, do you know how to work with webpack configurations. You can get all the project dependencies under your project folder by running npm run eject – Aftab Khan Commented Jul 5, 2017 at 16:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 ponent
import myVideo from './abc.mp4';
// This will bee a string with the path to the video at build time

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

This worked for me:

in react-app-env.d.ts add:

declare module '*.mp4' {
  const src: string;
  export default src;
}

Example of use:

import styles from './demo.module.scss';
import Video from './demo.mp4';


export default function Demo() {
    return (
        <div className={styles.demoWrapper}>
            <div className={styles.demoContainer}>
                <video controls>
                    <source src={Video} type="video/mp4"/>
                </video>
            </div>
        </div>
    );
}