Webpack Build Not Rendering HTML5 Video

Question

-- I have a HTML5 video that loads correctly while at localhost (dev environment).

React component

import HomeVideo from '../video/home.mp4';
const Home = () => (
  <div className="home-container">
    <div className='video-container'>
    </div>
    <video autoPlay loop>
      <source src={HomeVideo} type='video/mp4' />
      Your browser does not support the video tag.<a href="https://youtu.be/bgSMpRpObCg" rel="noopener noreferrer" target="_blank">Watch it here</a>
    </video>
  </div>
  </div>    
)
export default Home;

The video loads correctly in DEV:

As soon as I run npm run build my webpack -p process everything.

Package.json

"scripts": {
    "start": "webpack-dev-server --devtool eval-source-map --history-api-fallback --open",
    "build": "webpack -p"
  },

With the production build I see the video in the console (however the src= shows the webpack build url) Is that the problem?

The video does not load in the page though.

These is how my webpack.config.js is currently written: ps: With or without the commented out lines the behavior is still the same. Works in dev and doesn't work after the build.

const webpack = require('webpack');

module.exports = {
  entry: `${__dirname}/src/index.js`,
  output: {
    path: `${__dirname}/build`,
    publicPath: '/build/',
    filename: 'bundle.js',
  },


  module: {
    rules: [
      //{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
      //{ test: /\.(mov|mp4)$/, loader: 'url-loader?limit=10000&mimetype=video/mp4' },
      {
        test: /\.(mov|mp4)$/, use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      {
        test: /\.css$/,
        use: ['style-loader', { loader: 'css-loader', options: { minimize: true } }],
      },
      {
        test: /\.(pdf|jpg|png|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[path][name].[hash].[ext]",
          },
        },
      },
    ]
  },

  plugins: process.argv.indexOf('-p') === -1 ? [] : [
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },
    }),
  ],
};

**I don't know if it matters but this is being served at GitHub pages.

Have you checked https://stackoverflow.com/questions/36465127/how-to-load-a-local-video-in-react-using-webpack ? — Santosh Shinde, Mar 05 '18 at 04:59
Do you mean at the `Index.js` or `App.js`? I only imported the video from the component using it, which is `Home.js`... — Null isTrue, Mar 05 '18 at 05:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166211/discussion-between-santosh-shinde-and-null-istrue). — Santosh Shinde, Mar 05 '18 at 05:07

Santosh Shinde · Accepted Answer · 2018-03-05T06:13:03.227

3

Use following web pack config.(uncomment lines bellow, remove the limit from /\.(mov|mp4)

  { test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
  { test: /\.(mov|mp4)$/, loader: 'url-loader' },

Please check the similar type of question to here.

And also check the more about url-loader and html-loader.

Hope this will help you !!

edited Mar 05 '18 at 06:13

answered Mar 05 '18 at 05:06

Santosh Shinde

6,045
7
44
68

By passing the url directly it returns a 404. On react land, it only works if I import the file first. – Null isTrue Mar 05 '18 at 05:24
I have added the webpack config please check it – Santosh Shinde Mar 05 '18 at 06:05

Webpack Build Not Rendering HTML5 Video

1 Answers1