How to load a local video in React using webpack?
<p>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:</p>

<pre><code>&lt;video src="http://www.w3schools.com/html/movie.mp4" controls /&gt;
</code></pre>

<p><strong>Here's what I've tried</strong></p>

<p><strong>1.</strong> Including the path directly</p>

<pre><code>&lt;video src={require('path/to/file.mp4')} controls /&gt;
</code></pre>

<p>which returns an error</p>

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

<hr>

<p><strong>2.</strong> Adding these loaders one at a time to the webpack config</p>

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

<p>this spit out the following error in the browser</p>

<pre><code>GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found)
</code></pre>

<hr>

<p><strong>3.</strong> I tried adding a direct url to the file</p>

<pre><code>&lt;video src={require('http://localhost:3000/path/to/file.mp4')} controls /&gt;
</code></pre>

<p>but still errors:</p>

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

<hr>

<p><strong>4.</strong> I tried adding the mp4 extension in my webpack config <a href="http://www.jordanpapaleo.com/blog/" rel="noreferrer">like this person did</a></p>

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

<p>but no luck</p>

<hr>

<p><strong>5.</strong> I started implementing <a href="https://www.npmjs.com/package/webpack-isomorphic-tools#user-info-menu" rel="noreferrer">webpack-isomorphic-tools</a> 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.  (<a href="https://github.com/bdefore/universal-redux/blob/master/config/webpack-isomorphic-tools.config.js" rel="noreferrer">see file</a>)</p>

<hr>

<p>I also noticed in the webpack documentation under <a href="https://webpack.github.io/docs/loader-conventions.html" rel="noreferrer">loader conventions</a> that <code>file-loader</code> will load video files.
<a href="https://i.stack.imgur.com/mtme4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mtme4.png" alt="webpack documentation image"></a>
Does this mean webpack won't load other video types such as <code>.mov, .vob, .avi, etc.</code>?</p>

<p>If you want to take a look at the code, <a href="https://github.com/alex-cory/relay-test" rel="noreferrer">here's the repository</a>.</p>

<hr>

<p><strong>Resources</strong>  </p>

<ul>
<li><a href="https://webpack.github.io/docs/loader-conventions.html" rel="noreferrer">Webpack Docs: Loader Conventions</a></li>
<li><a href="https://github.com/bdefore/universal-redux/issues/68" rel="noreferrer">Add a WebM and MP4 loader to the default Webpack config</a></li>
<li><a href="https://github.com/FormidableLabs/spectacle-boilerplate/issues/13" rel="noreferrer">Loading mp4 video in to <code>video</code> tag w/ File loader</a></li>
<li><a href="https://github.com/webpack/react-starter/issues/66" rel="noreferrer">Unable to load resources via file-loader</a></li>
</ul>