13

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. webpack documentation image 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

Alex Cory
  • 10,635
  • 10
  • 52
  • 62
  • "Does this mean webpack won't load other video types such as .mov, .vob, .avi, etc.?" --- it does not mean that: webpack does not care how you match filenames as soon as `test` passes. – zerkms Apr 07 '16 at 01:31
  • I think your 'test' regex is wrong. Try `/\.(png|jpg|jpeg|gif|svg|mp4)$/`. – dz902 Apr 07 '16 at 01:46
  • @Dai what's wrong with it? – zerkms Apr 07 '16 at 04:50
  • @zerkms Sorry, it just looked redundant and the last `.` was not escaped, but I don't think it is the origin of the problem, i.e. not wrong. What do you get in the `src` when using solution 4? – dz902 Apr 07 '16 at 06:38
  • @Dai I'm not an OP :-) Indeed, the `.` must be escaped, but that could only lead to false-positives, that is not a problem at the moment. – zerkms Apr 07 '16 at 06:52
  • try importing your file on top of the component instead of importing inside jsx. for ex: `import videoUrl from '/path/to/file.mp4' `and then inside jsx put ``. – Vikramaditya Apr 07 '16 at 10:24
  • yeah the `import` statement didn't work. It still gave the **same error as solution 2**. – Alex Cory Apr 07 '16 at 20:45
  • I was able to get it work doing both 1. and 2. together. The only difference is that I did a `var x = require('path/to/video')`. I also used the `name=videos/[name].[ext]`, may be related. Also make sure you start and stop webpack if you're watching files. – Patrick Steadman Apr 14 '16 at 00:02

2 Answers2

15

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

Xiong Chiamiov
  • 13,076
  • 9
  • 63
  • 101
Heitor Estrela Gomes
  • 151
  • 2
0

Although this is an old post, and the question is specifically about WebPack...

If you're using Typescript and a boilerplate such as create-react-app, and if you have your video on the static folder, then please check out this solution, of adding the type to src/react-app-env.d.ts, before ejecting your app:

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

Liad Magen
  • 63
  • 1
  • 7
  • Just to add to this: if you are using VS Code, you'd have to restart your Typescript server as well. This is done by opening the Command Pallete (Ctrl + Shift + P) while in a .ts file then search for "restart TS server". – Thomas Bui Mar 28 '22 at 06:24