无法使用 React 加载本地视频答案

【问题标题】：Can't load local video with React无法使用 React 加载本地视频
【发布时间】：2017-04-05 04:13:36
【问题描述】：

我无法使用 React 加载本地视频。我已将视频放在我的文件夹“app/assets/video/concert.mp4”中。在我的 React 文件“search_bar.jsx”中，我有一个 HTML5 视频标签，我将视频来源为：

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

这是我的文件结构：

MusicianHub
- 应用程序
  - 资产
    - 视频
      - 音乐会.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'
    }
    ]
  }

【问题讨论】：

你能发布你的 webpack 配置吗？另外，尝试使用 import video from '../../app/assets/videos/convert.mp4 和 <video src={video} />，这样 webpack 会识别它必须拉入视频文件
使用 webpack-dev-server 嗯？
@erichardson30 我已经上传了我的 webpack.config 并包含了 import 语句，但看起来 webpack 对我提供的加载器不满意：加载器 /Users/briantsai/Desktop/MusicianHub/node_modules 中的错误/url/url.js?limit=10000&mimetype=video/mp4 没有返回函数@ ./frontend/components/search_bar.jsx 15:15-61
我已经从 webpack 加载了 url-loader 和 file-loader 模块，所以错误消失了，但现在在 Chrome 开发工具中它说：加载资源失败：服务器响应状态为404（未找到）localhost:3000/a740242064c86421e8ff988502f202a8.mp4
我认为应该是url-loader 而不仅仅是url。

标签： reactjs path html5-video local

【解决方案1】：

这适用于本地文件：

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

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

【讨论】：

如果本地路径以前不知道怎么办？（或在地图内？）

【解决方案2】：

我决定将视频上传到远程源 Cloudinary。感谢大家的帮助。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

这种方式适用于本地照片和视频：

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

render(){
return (
 <video controls>
      <source src={concert} type="video/mp4"/>
      Your browser doesn't support HTML video.
 </video>
); }

【讨论】：