如何使用 webpack 在 React 中加载本地视频? [英] How to load a local video in React using webpack?

问题描述

我似乎无法弄清楚如何从本地文件中获取 html5 视频以在 React 应用程序中呈现.从字面上看，我能够让它工作的唯一方法是这样的:

这是我尝试过的

1.直接包含路径

返回错误

模块解析失败:/path/to/file.mp4 Line 1: Unexpected token ILLEGAL您可能需要一个合适的加载器来处理这种文件类型.

<小时>

2. 将这些加载器一次一个添加到 webpack 配置中

<代码>{测试:/.(mp4)$/,加载器:'文件'//加载器: 'url-loader'//loader: 'url-loader?limit=100000'//加载器:'文件加载器'//loader: 'file-loader?name=videos/[name].[ext]'},

这在浏览器中吐出以下错误

GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404(未找到)

<小时>

3.我尝试在文件中添加一个直接网址

<video src={require('http://localhost:3000/path/to/file.mp4')} 控制/>

但仍然出错:

未找到模块:错误:无法解析 path/to/file.mp4 中的模块http://localhost:3000/path/to/file.mp4"

<小时>

4. 我尝试在我的 webpack 配置中添加 mp4 扩展这是否意味着 webpack 不会加载其他视频类型，例如 .mov、.vob、.avi 等?

如果您想查看代码，这里是代码库.

<小时>

资源

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

解决方案

我也遇到了同样的问题，我的解决方案是:

它使用 https://github.com/webpack/html-loader 和 https://github.com/webpack/url-loader:

加载器配置:

 加载器:[{测试:/.html$/,loader: 'html-loader?attrs[]=video:src'}, {测试:/.mp4$/,加载器:'url?limit=10000&mimetype=video/mp4'}]

在 html 中:

一个简单的视频标签，记住 webpack 使用引用到 html 文件的路径.

<video src="../../../assets/videos/cover1.mp4"></video>

这对我有用.

参考资料:https://github.com/webpack/html-loader/issues/28

I can't seem to figure out how to get an html5 video to render in a react app from local files. Literally the only way I've been able to get this to work is like this:

<video src="http://www.w3schools.com/html/movie.mp4" controls />

Here's what I've tried

1. Including the path directly

<video src={require('path/to/file.mp4')} controls />

which returns an error

Module parse failed: /path/to/file.mp4 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.

---

2. Adding these loaders one at a time to the webpack config

{
  test: /.(mp4)$/,
  loader: 'file'
  // loader: 'url-loader'
  // loader: 'url-loader?limit=100000'
  // loader: 'file-loader'
  // loader: 'file-loader?name=videos/[name].[ext]'
},

this spit out the following error in the browser

GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found)

---

3. I tried adding a direct url to the file

<video src={require('http://localhost:3000/path/to/file.mp4')} controls />

but still errors:

Module not found: Error: Cannot resolve module 'http://localhost:3000/path/to/file.mp4' in path/to/file.mp4

---

4. I tried adding the mp4 extension in my webpack config like this person did

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

but no luck

---

5. I started implementing webpack-isomorphic-tools but then I wasn't sure if this was the right direction so I paused on it. It seems like this guy got it working this way. (see file)

---

I also noticed in the webpack documentation under loader conventions that file-loader will load video files. Does this mean webpack won't load other video types such as .mov, .vob, .avi, etc.?

If you want to take a look at the code, here's the repository.

---

Resources

• 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

解决方案

I had the same problem, my solution is:

It uses https://github.com/webpack/html-loader and https://github.com/webpack/url-loader:

The loaders configuration:

  loaders: [{
      test: /.html$/,
      loader: 'html-loader?attrs[]=video:src'
    }, {
      test: /.mp4$/,
      loader: 'url?limit=10000&mimetype=video/mp4'
  }]

And in html:

A simple video tag, remeber webpack uses path referenced to the html file.

<video src="../../../assets/videos/cover1.mp4"></video>

This works for me.

References: https://github.com/webpack/html-loader/issues/28

这篇关于如何使用 webpack 在 React 中加载本地视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！