我似乎无法弄清楚如何从本地文件中获取 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.我尝试在文件中添加一个直接 url
<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文件中加载惯例是file-loader将加载视频文件。
这是否意味着 webpack 不会加载其他视频类型，例如.mov, .vob, .avi, etc.？
如果你想看一下代码，这里是存储库。
资源