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. 我尝试在我的webpack配置like this person did中添加mp4扩展程序

{
  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。

资源

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

Answer 2

尽管这是一篇老文章，但问题特别是关于WebPack ...

如果您使用的是Typescript和样板，例如create-react-app，并且您的视频位于静态文件夹中，则请查看此解决方案，将类型添加到{{1 }}，然后弹出您的应用程序：

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

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

2 个答案: