Webpack 3 locates .mp4 file but video is not playable

Clone this project on GitHub

I've created an animation in Adobe's new Animate CC and exported it as an .mp4 file

In my webpack.config.js file, I stated that the file-loader should be used to load my .mp4 file like so:

webpack.config.js

  {
    test: /\.(mov|mp4)$/,
    use: [
      'file-loader'
    ]
  }

(You can find my webpack.config.js source code below)

So why, when I run webpack (or rather locally, webpack as an npm script)

package.json

"build:dev": "webpack --watch",

does the browser locate the .mp4 file

index.html

<video loop autoplay controls>
  <source id="arrows" src="c31...random_hash...1611.mp4" type="video/mp4">
</video>

but not play it?

Other things I've tried

• setting the video tag's src attribute in JavaScript
• placing the video file next to the index.html in the same directory
• Using a different format (.mov)

Here is my source code:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-maps',
  devServer: {
    contentBase: './dist',
    port: 3033
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.scss$|\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "sass-loader"]
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
            'url-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/html/index.html',
      favicon: 'src/images/icon.png'
    }),
    new ExtractTextPlugin('styles.css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],
  resolve: {
        alias: {
            jQuery: "src/js/jquery",
            $: "src/js/jquery"
        }
    }
}

main.js

import mov from '../media/arrows.mp4';

function render_arrows() {
  var vidtag;
  vidtag = document.getElementById('arrows');
  vidtag.src = mov;
}

render_arrows();

As I mentioned earlier, you could also clone this project on GitHub.