时间戳

首页 > 解决方案 > 如何处理本地视频文件 Reactjs

javascript - 如何处理本地视频文件 Reactjs

问题描述

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

这背后的想法是制作一个全屏视频，如https://www.w3schools.com/howto/howto_css_fullscreen_video.asp 但使用 Reactjs。

视频.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 模块未找到：无法解析 'C:\Users\sanjs\Desktop\landing-video\src' 中的 './assets/*.mp4'

标签： javascriptreactjs

解决方案

  1. custom.d.ts在你的 src 目录中创建一个
  2. 将此代码粘贴到该文件中
declare module '*.mp4' {
  const src: string;
  export default src;
}

那应该工作！

推荐阅读