1
votes

comment gérer les fichiers vidéo locaux Reactjs

J'ai besoin d'aide pour gérer les fichiers vidéo locaux dans reactjs ... impossible de résoudre l'erreur ./assets/video.mp4 ... j'ai essayé toutes les directions possibles.

l'idée derrière cela est de faire un plein écran vidéo comme https://www.w3schools.com/howto/howto_css_fullscreen_video.asp mais avec Reactjs ..

video.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'));

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

erreur de console : ./ src / index.js Module introuvable: impossible de résoudre "./assets/*.mp4" dans "C: \ Users \ sanjs \ Desktop \ landing-video \ src"

javascript reactjs

2 commentaires

assets est-il un sous-dossier de landing-video / src ou un sous-dossier de landing-video ? Dans ce dernier cas, vous aurez peut-être besoin de ../assets au lieu de ./assets

assets est un sous-dossier de landing-video / src .. si je supprime l'importation Robin de './assets/Robin.mp4' et passe simplement la direction dans l'objet VIDEO, la console ne lance aucune erreur ... mais le la vidéo ne se reproduit pas ... alors je me demande si le fichier peut être manipulé localement ... car j'ai déjà une application vidéo mais j'ai traité les fichiers avec des URL https ... je suis perdu je ne sais pas ce qui se passe sur

3 Réponses :

1
votes

Peut-être que vous avez une faute d'orthographe. Voici un code pour importer une vidéo locale et cela fonctionne très bien

  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;

J'ai importé mon fichier vidéo dans le même répertoire de app.js. Peut-être que cela vous aidera.

0 commentaires

0
votes

résolu! le problème était que le nom de fichier 'Robin .mp4' et que j'avais importé en tant que '' Robin.mp4 '' j'ai changé le nom de fichier en 'Robin.mp4' et c'est tout.

0 commentaires

0
votes

Créez un custom.d.ts dans votre répertoire src
Collez ce code dans ce fichier

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

Cela devrait fonctionner!

0 commentaires