CODEWITHSUNDEEP
javascriptwebpackvue.jsvuejs2
Steven Stephonson
Steven Stephonson

Reputation: 33

VueJS, Webpack and Videos

I am having an issue using vue-cli with the webpack-simple template. When I import my video: 

<video src="./assets/twp-logo-video.mp4" id="initial-logo" type="video/mp4"><!-- 700 x 700 --> </video>

I get an error: 

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Kindly advise further on how I can use the video in my template. I am not able to find specific loaders for video and am not certain how to proceed and what to look for.

Here is my webpack config: https://jsfiddle.net/rva51akn/3/

My app.vue and index.html files: https://jsfiddle.net/2yfzus09/

Upvotes: 0

Views: 1369

Answers (1)

Max Liashuk
Max Liashuk

Reputation: 1053

It seems like there is a typo in your config for file-loader:

Correct config:

 {
    test: /\.(png|jpg|gif|svg|mp4)$/, // note `mp4)` here, instead of `mp4})`
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }

Your (incorrect) config:

 {
    test: /\.(png|jpg|gif|svg|mp4})$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }

Upvotes: 2

Related Questions