static-site-boilerplate icon indicating copy to clipboard operation
static-site-boilerplate copied to clipboard

Video isn't being loaded during production.

Open elebumm opened this issue 4 years ago • 3 comments

Describe the bug I have a video in my HTML using a <video> tag. I have an mp4 file but when I do a production build, it doesn't get translated over.

To Reproduce Steps to reproduce the behavior:

  1. Insert a video tag with an mp4 file linked.
  2. Run a production build or deploy to netlify.
  3. Look at the video, it will result in a 404.

Expected behavior The video should be loaded in.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Mac OS Catalina
  • Browser Chrome
  • Version [e.g. 22]

Additional context I see that there is an attempt to load the videos over. in the loaders file.

elebumm avatar Mar 04 '20 21:03 elebumm

Here is how I solved my issue.

I first had to import the file in my scripts:

import '../images/housedrone.mp4';

Then the webpack build would add a hash to the file name which would cause it to not be read under the source of the video. So in the loaders.js file, i replaced the video section with this:

const videos = {
  test: /\.(mp4|webm)$/,
  use: [
    {
      loader: 'file-loader',
      query: {
        name: '[name].[ext]',
        outputPath: 'images/',
      },
    },
  ],
};

Now it works, but I don't know if this is the best solution, just one that works for me now.

elebumm avatar Mar 05 '20 17:03 elebumm

The mentioned

truongoi avatar Aug 19 '20 08:08 truongoi

Updating html-loader up to the 1.3.2 version worked for me

umer4ik avatar Oct 16 '20 14:10 umer4ik