如何处理本地视频文件 Reactjs答案

【问题标题】：how to handle local video files Reactjs如何处理本地视频文件 Reactjs
【发布时间】：2019-05-04 04:57:59
【问题描述】：

我需要一些帮助来处理 reactjs 中的本地视频文件...无法解决 ./assets/video.mp4 错误...尝试了所有可能的方向..

这背后的想法是制作像https://www.w3schools.com/howto/howto_css_fullscreen_video.asp这样的全屏视频但是使用 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'));

控制台错误：

./src/index.js 模块未找到：无法解析 './assets/*.mp4' in 'C:\Users\sanjs\Desktop\landing-video\src'

【问题讨论】：

是assets 的子文件夹landing-video/src 还是landing-video 的子文件夹？如果是后者，您可能需要../assets 而不是./assets
assets 是landing-video/src 的子文件夹。如果我从'./assets/Robin.mp4' 中删除导入Robin 并且只在对象VIDEO 中传递方向，则控制台不会抛出任何错误...但是视频无法重现...所以我想知道该文件是否可以在本地处理...因为我已经有一个视频应用程序，但我使用 urls https 处理文件...我迷路了不知道怎么回事

标签： javascript reactjs

【解决方案1】：

在您的 src 目录中创建一个 custom.d.ts
将此代码粘贴到该文件中

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

应该可以！

【讨论】：

如果你使用打字稿，这就是你来这里的目的。
第 1 步是多余的。 TypeScript 类型声明可以直接添加到“react-app-env.d.ts”文件中
只要解决方案有效，我会说好的 :))

【解决方案2】：

也许你有一些拼写错误这里是导入本地视频的代码，它工作正常

  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;

我在 app.js 的同一目录中导入了我的视频文件。也许这会对你有所帮助。

【讨论】：

【解决方案3】：

解决了！问题是文件名“Robin .mp4”，我导入为“Robin.mp4”，所以我将文件名更改为“Robin.mp4”，就是这样。

【讨论】：