1

I'm loading assets with file-loader in Webpack3 and everything works well for common images types but when I try to load videos (MP4, MOV ...) it seems that it can't detect those. Here's the code to load assets in my webpack.config file:

      {
        test: /\.(jpg|png|gif|svg|mp4|mov)$/,
        use: [
      {
        loader: "file-loader",
        options: {
          outputPath: "assets/"
        }
      }
    ]
  },

And in my index.html file if I add this:

  <img src='assets/file.png' alt=''/>

Everything is ok but not if I try with a video tag like :

  <video width="320" height="240" controls id='video'>
    <source src="assets/video2.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

Any help would be very appreciated! Thanks!

user990463
  • 439
  • 1
  • 7
  • 27

1 Answers1

2

You may try the inline loader syntax; i.e.

import SomeVideo from '-!file-loader!../../../video2.mp4';

Or

require("file!../../../video2.mp4")
orabis
  • 2,749
  • 2
  • 13
  • 29
  • Thanks for answer. It works but can't I automatize it with the webpack.config file ? For each video files instead of inlining the loader ? – user990463 Jan 07 '18 at 15:42
  • I think you may use additional loaders, html-loader and url-loader. You can look at those two links 1) https://github.com/FormidableLabs/spectacle-boilerplate/issues/13 , and 2) https://stackoverflow.com/questions/36465127/how-to-load-a-local-video-in-react-using-webpack – orabis Jan 07 '18 at 15:51