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

Question

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

videoreactjswebpackloaderes6-module-loader

13

我似乎无法弄清如何在React应用程序中从本地文件渲染html5视频。实际上，我唯一能够使其工作的方式是这样的：

<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扩展名，就像这个人所做的那样

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

但是没有运气。

5. 我开始实施webpack-isomorphic-tools，但我不确定这是否是正确的方向，所以我暂停了。看起来这个人用这种方式使它工作了。（见文件）

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

如果你想查看代码，这里是存储库。

资源

- Alex Cory

这是否意味着webpack不会加载其他视频类型，例如.mov、.vob、.avi等？--- 这并不意味着：只要test通过，webpack就不关心您如何匹配文件名。 - zerkms

@zerkms 抱歉，它看起来只是冗余的，最后一个 . 没有被转义，但我认为这不是问题的根源，即不是错误的。使用解决方案4时，您在 src 中得到了什么？ - dz902

@Dai 我不是 OP :-) 实际上，. 必须被转义，但这只会导致误报，目前并不是问题。 - zerkms

尝试将文件导入组件顶部而不是在JSX内部导入。例如：import videoUrl from '/path/to/file.mp4'，然后在JSX内部放置<video src={videoUrl} />。 - Vikramaditya

是的，import语句没有起作用。它仍然给出了与解决方案2相同的错误。 - Alex Cory

显示剩余3条评论

2个回答

1

虽然这是一个旧帖子，问题特定于WebPack...

如果您正在使用Typescript和像create-react-app这样的模板，并且如果您的视频在静态文件夹中，则请在弹出应用程序之前添加类型到src/react-app-env.d.ts，请查看此解决方案：

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

- Liad Magen

只是补充一下：如果你正在使用 VS Code，你还需要重新启动你的Typescript服务器。这可以通过在.ts文件中打开命令面板(Ctrl + Shift + P)，然后搜索“restart TS server”来完成。 - Thomas Bui

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Heitor Estrela Gomes · Accepted Answer

我曾经遇到过同样的问题，我的解决方法是:

使用 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