我似乎无法弄清楚如何从本地文件中获取要在 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. 我尝试向文件添加一个直接 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 扩展 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 等
?
如果你想看一下代码,here's the repository .
资源
最佳答案
我遇到了同样的问题,我的解决方法是:
它使用 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>
这对我有用。
关于video - 如何使用 webpack 在 React 中加载本地视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36465127/