javascript - how to handle local video files Reactjs - Stack Overflow

admin管理员组

文章数量:1180406

I need some help to handle local video files in reactjs... can't resolve ./assets/video.mp4 error... tried every possible direction..

the idea behind this is to make a full screen video like .asp but with Reactjs.

video.js

       import React from 'react';

       class Video extends React.Component {
       render(){
          return(
             <div className="myVideo">
                 <video controls autostart autoPlay src={this.props.src} type={this.props.type}/>
            </div>
             )
           }
         }

         export default Video;

index.js

      import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Video from './video';
import Robin from './assets/Robin.mp4'

const VIDEO = {
  src:Robin,
  type:'video/mp4'
 };

class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       src: VIDEO.src,
       type:VIDEO.type
     }
   }

   render(){
     return(
       <div>
         <Video src={this.state.src} type={this.state.type}/>
       </div>
     )
   }

}
ReactDOM.render(<App />, document.getElementById('root'));

console error:

./src/index.js Module not found: Can't resolve './assets/*.mp4' in 'C:\Users\sanjs\Desktop\landing-video\src'

I need some help to handle local video files in reactjs... can't resolve ./assets/video.mp4 error... tried every possible direction..

the idea behind this is to make a full screen video like https://www.w3schools.com/howto/howto_css_fullscreen_video.asp but with Reactjs.

video.js

       import React from 'react';

       class Video extends React.Component {
       render(){
          return(
             <div className="myVideo">
                 <video controls autostart autoPlay src={this.props.src} type={this.props.type}/>
            </div>
             )
           }
         }

         export default Video;

index.js

      import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Video from './video';
import Robin from './assets/Robin.mp4'

const VIDEO = {
  src:Robin,
  type:'video/mp4'
 };

class App extends Component {
   constructor(props){
     super(props)
     this.state = {
       src: VIDEO.src,
       type:VIDEO.type
     }
   }

   render(){
     return(
       <div>
         <Video src={this.state.src} type={this.state.type}/>
       </div>
     )
   }

}
ReactDOM.render(<App />, document.getElementById('root'));

console error:

./src/index.js Module not found: Can't resolve './assets/*.mp4' in 'C:\Users\sanjs\Desktop\landing-video\src'

• javascript
• reactjs

Share Improve this question Follow edited Nov 5, 2021 at 19:54 Ahmet Emre Kilinc 6,8851919 gold badges3636 silver badges4747 bronze badges asked May 4, 2019 at 4:57 Santiago Spinetto JungSantiago Spinetto Jung 19811 gold badge44 silver badges1414 bronze badges 2

• is assets a sub-folder of landing-video/src or a sub-folder of landing-video? If the latter, you may need ../assets instead of ./assets – Jaromanda X Commented May 4, 2019 at 5:58
• assets is a sub-folder of landing-video/src.. if I remove the import Robin from './assets/Robin.mp4' and just pass the direction in the object VIDEO the console doesnt throw any error...but the video does not reproduce...so I wonder if the file can be handle localy...because I allready have a video app but I trated the files with urls https...I'm lost I don't know what is going on – Santiago Spinetto Jung Commented May 4, 2019 at 15:14

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 20

1. Create a custom.d.ts in your src directory
2. Paste this code in that file

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

That should work!

Maybe you have some spelling mistake here is a code for import local video and it just works fine

  import React from "react";
  import "./App.css";
  import Video from "./video.mp4";

  function App() {
    return (
      <div className="App">
          <video controls autostart autoPlay src={Video} type="video/mp4" />
      </div>
    );
  }

  export default App; 

I imported my video file at the same directory of app.js. Maybe this will help you.

solved! the problem was that the filename 'Robin .mp4' and I imported as ''Robin.mp4" so I changed de filename to 'Robin.mp4' and that's it.

本文标签： javascripthow to handle local video files ReactjsStack Overflow