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

Question

我似乎无法弄清楚如何在本地文件的反应应用程序中呈现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.我尝试添加了MP4扩展在我的WebPack配置这样的人做

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

但没有运气

---

5.我开始实现webpack-isomorphic-tools但是我不确定这是否是正确的方向所以我暂停了它.好像这个家伙以这种方式工作.(见文件)

---

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

如果你想看看代码,这里是存储库.

---

资源

• Webpack文档:加载程序约定
• 将WebM和MP4加载程序添加到默认Webpack配置中
• 将mp4视频加载到video标签w /文件加载器
• 无法通过文件加载器加载资源

Answer 1

我有同样的问题,我的解决方案是:

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