VueJS, Webpack and Videos

Question

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/

Thank you for the reply, I have uploaded the code in JSFiddle and shared the links in my edited post. — Steven Stephonson, May 31 '18 at 08:21
Please add working live demo, which is giving the above error, the link you gave may help but not enough to fix the problem. — Niklesh Raut, May 31 '18 at 08:25
Where could I do this with Webpack? Js Fiddle doesn't provide an option — Steven Stephonson, May 31 '18 at 08:32
Try importing your video like specified here: https://stackoverflow.com/questions/45645675/webpack-3-locates-mp4-file-but-video-is-not-playable — Stephan-v, May 31 '18 at 08:39

score 2 · Answer 1 · answered May 31 '18 at 21:54

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]'
    }
  }

VueJS, Webpack and Videos

1 Answers1