-1

I am using webpack to build a basic site. Everything is working as far as images, sass, and loading of local fonts goes. I am now trying to load video from a local file however when i go to add it webpack is giving me a 404 error. Can anyone help me with my configuration since it seems I have it wrong for video. The video controls render but the video itself doesn't.

HTML code

    <video controls width="600">
      <source src="./assets/images/hero_vid_bg_1.mp4" type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
    </video>

Webpack Config file

module.exports = {
  entry: {
    main: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jpg|gif|)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "./assets/images"
          }
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: "file-loader",
        options: {
          name: "[name].[hash].[ext]",
          outputPath: "./assets/fonts"
        }
      },
      {
        test: /\.(mov|mp4)$/,
        loader: "file-loader",
        options: {
          name: "[name].[hash].[ext]",
          publicPath: "./assets/images",
          outputPath: "./assets/videos"
        }
      }
    ]
  }
};

Absolute path to video file is assets/images/hero_vid_bg.mp4

mangosing
  • 1
  • 1

1 Answers1

0

The src specified in your source tag doesn’t have the hash part you configured in file-loader’s option，you should replace the path with an import statement:

import mp4 from path/to/video;

and use the variable mp4 as src in the source tag

Kainix
  • 1,186
  • 3
  • 21
  • 33
lijunbo
  • 1
  • 1