[Vuejs]-How to add a loader to handle .mpd and .mp4s filetype (dash media files)?

by

0👍

✅

Your answer is here: https://vuejs-templates.github.io/webpack/static.html

To answer this question, we first need to understand how Webpack deals with static assets. In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.

Because logo.png is not JavaScript, when treated as a module dependency, we need to use url-loader and file-loader to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.

I assume that what you need is "Real" Static Assets (it’s explained at the same link), as there is no point to "pack" your media file along with JS.

In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.

Alternatively you can change your nuxt configuration to load audio files as described in documentation:

You need to extend its default configuration in nuxt.config.js:

export default {
  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g|OTHER_AUDIO_FILE_EXTENSIONS_LIKE_MP4S)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

Just replace OTHER_AUDIO_FILE_EXTENSIONS_LIKE_MP4S with extensions you want to load.

0👍

I ended up with changing the template video tag to:

<source src="tangent_dash.mpd" type="application/dash+xml" />

and adding the following to the nuxt.config.js file:

build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          video: 'src'
        }
      }
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(mpd|mp4|m4s)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }

Leave a comment