Loading a .mov format video in a Nuxt app (for Safari)

Question

In my Nuxt app I'm loading a video of the .webm format which works as expected. As a fallback for Safari I would like to load a .mov formatted video:

<video>
  <!-- Safari -->
  <source src="~/assets/videos/video.mov" type="video/mov" />
  <!-- other browsers -->
  <source src="~/assets/videos/video.webm" type="video/webm" />
</video>

However, it seems that this format is not supported with the default webpack config, this is what I get:

Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

The question is how should a loader for this specific file type (mov) configured?
I couldn't find anything helpful in the mentioned link, nor on the web in general.

Please check this CodeSandbox to see a reproduction of this issue.

Any help will be appreciated.

Answer 1

Had the same problem. All we need is to extend webpack's config. That's how my build section of nuxt.config.js looks like:

build: {
  extend (config) {
    config.module.rules.push({
      test: /\.(mov)$/i,
      loader: 'file-loader',
      options: {
        name: '[path][name].[ext]',
        esModule: false
      }
    })
  }   
}