如何使用 webpack 在 React 中加载本地视频？答案

【问题标题】：How to load a local video in React using webpack?如何使用 webpack 在 React 中加载本地视频？
【发布时间】：2016-07-27 16:22:36
【问题描述】：

我似乎无法弄清楚如何从本地文件获取 html5 视频以在 react 应用程序中呈现。从字面上看，我能够让它工作的唯一方法是这样的：

<video src="http://www.w3schools.com/html/movie.mp4" controls />

这是我尝试过的方法

1.直接包含路径

<video src={require('path/to/file.mp4')} controls />

返回错误

Module parse failed: /path/to/file.mp4 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.

2.将这些加载器一次添加到 webpack 配置中

{
  test: /\.(mp4)$/,
  loader: 'file'
  // loader: 'url-loader'
  // loader: 'url-loader?limit=100000'
  // loader: 'file-loader'
  // loader: 'file-loader?name=videos/[name].[ext]'
},

这会在浏览器中吐出以下错误

GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found)

3.我尝试将直接网址添加到文件中

<video src={require('http://localhost:3000/path/to/file.mp4')} controls />

但仍然有错误：

Module not found: Error: Cannot resolve module 'http://localhost:3000/path/to/file.mp4' in path/to/file.mp4

4. 我尝试在我的 webpack 配置中添加 mp4 扩展 like this person did

{
  test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$|.mp4$/,
  loader: 'url-loader?limit=8192'
}

但没有运气

5.我开始实施webpack-isomorphic-tools，但后来我不确定这是否是正确的方向，所以我暂停了。看来这家伙是这样操作的。 (see file)

我还在loader conventions 下的webpack 文档中注意到file-loader 将加载视频文件。这是否意味着 webpack 不会加载其他视频类型，例如 .mov, .vob, .avi, etc.？

如果你想看一下代码，here's the repository。

资源

【问题讨论】：

"这是否意味着 webpack 不会加载其他视频类型，例如 .mov、.vob、.avi 等？" --- 这并不意味着：一旦test 通过，webpack 并不关心你如何匹配文件名。
我认为您的“测试”正则表达式是错误的。试试/\.(png|jpg|jpeg|gif|svg|mp4)$/。
@Dai 怎么了？
@zerkms 抱歉，它看起来是多余的，最后一个 . 没有转义，但我认为这不是问题的根源，即没有错。使用解决方案 4 时，您会在 src 中得到什么？
@Dai 我不是 OP :-) 确实，. 必须被转义，但这只会导致误报，目前这不是问题。跨度>

标签： video reactjs webpack loader es6-module-loader

【解决方案1】：

虽然这是一篇旧帖子，但问题是专门针对 WebPack...

如果您使用的是 Typescript 和样板文件，例如 create-react-app，并且如果您的视频位于静态文件夹中，请查看此解决方案，将类型添加到 src/react-app-env.d.ts，然后再弹出您的应用：

https://github.com/facebook/create-react-app/issues/6822

【讨论】：

【解决方案2】：

我遇到了同样的问题，我的解决方法是：

它使用https://github.com/webpack/html-loader 和https://github.com/webpack/url-loader：

加载器配置：

  loaders: [{
      test: /\.html$/,
      loader: 'html-loader?attrs[]=video:src'
    }, {
      test: /\.mp4$/,
      loader: 'url?limit=10000&mimetype=video/mp4'
  }]

在 html 中：

一个简单的视频标签，记住 webpack 使用引用到 html 文件的路径。

<video src="../../../assets/videos/cover1.mp4"></video>

这对我有用。

参考资料： https://github.com/webpack/html-loader/issues/28

【讨论】：

我想有错字。应该是loader: 'url-loader?limit...。这种方式对我有用