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

发布时间：2020-12-15 20:53:41 所属栏目：百科来源：网络整理

导读：我似乎无法弄清楚如何在本地文件的反应应用程序中呈现html5视频.从字面上看,我能够让这个工作的唯一方法是： video src="http://www.w3schools.com/html/movie.mp4" controls / 这是我尝试过的 1.直接包括路径 video src={require('path/to/file.mp4')} cont

我似乎无法弄清楚如何在本地文件的反应应用程序中呈现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)

我尝试在文件中添加一个直接的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

我尝试在我的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等？

如果你想看看代码,here’s the repository.

资源

> Webpack Docs: Loader Conventions
> Add a WebM and MP4 loader to the default Webpack config
> Loading mp4 video in to video tag w/ File loader
> Unable to load resources via file-loader

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!