Question

我无法使用React加载本地视频。我把视频放在我的文件夹“app / assets / video / concert.mp4”中。在我的React文件“search_bar.jsx”中，我有一个HTML5视频代码，我将视频发布为：

render(){ return (<video src="../../app/assets/videos/concert.mp4" controls />); }

这是我的文件结构：

MusicianHub
- 应用
  - 资产
    - 视频
      - concert.mp4
- 前端
  - 部件
    - search_bar.jsx

如果您加载外部视频，则视频标记有效。这是我的webpack.config.js

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
      test: /\.html$/,
      loader: 'html-loader?attrs[]=video:src'
    }, {
      test: /\.mp4$/,
      loader: 'url?limit=10000&mimetype=video/mp4'
    }
    ]
  }

Answer 1

我决定将视频上传到Cloudinary，而不是远程来源。谢谢大家的帮助。

Answer 2

这适用于本地文件：

import videos from '../../app/assets/videos/concert.mp4'

render(){
return (
 <video loop autoPlay>
      <source src={videos} type="video/mp4"/>
 </video>
); }

Answer 3

这是我的解决方法。 https://github.com/facebook/create-react-app/issues/6822#issuecomment-483079845

您可以使用src / react-app-env.d.ts对其进行测试：

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

无法使用React加载本地视频

3 个答案: