Utilizing VueJS, Webpack, and the Power of Video

I'm running into an issue when attempting to use vue-cli with the webpack-simple template. Upon importing my video file: 

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

I encounter the following 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)

I would appreciate guidance on how to incorporate the video into my template. I've been unable to locate specific loaders for videos and am uncertain about the next steps and what to look for.

Below are links to my webpack configuration, app.vue, and index.html files: Webpack Config - https://jsfiddle.net/rva51akn/3/ App.vue and Index.html Files - https://jsfiddle.net/2yfzus09/

javascriptwebpackvue.jsvuejs2

Answer №1

There appears to be an error in your configuration for the file-loader:

Proper configuration:

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

Your (incorrect) configuration:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Right-click context menu not working properly with Internet Explorer

Seeking assistance with extracting the URL and title of a website using JavaScript. The script is stored in a .HTM file accessed through the registry editor at file://C:\Users\lala\script.htm Below is the script: <script type="text/java ...

javascriptwindowsinternet-exploreradd-onregedit

Utilizing Immutable.js within React's Pure Components

Having some difficulty incorporating React PureComponents with Immutable.js. Take a look at this demonstration: https://codepen.io/SandoCalrissian/pen/QaEmeX The demo showcases 2 components being rendered. The first (NoramlPure) is a regular PureComponen ...

javascriptreactjsimmutable.js

Is it possible to establish a default route in Next.js?

Is it possible to set up default routes in Next.js so that all routes, or a specific list of routes, will automatically navigate to a designated page? My project involves using Next.js to create the marketing website, as well as the sign-up and sign-in pr ...

javascriptreactjsnext.jscreate-react-app

Follow button on LinkedIn is secure with Google Chrome's Content Security Policy set to script-src report-sample

Having an issue trying to add a LinkedIn Follow button to the website. It works perfectly in Firefox, but is not functioning in Chrome. The Console displays the following error: The source list for Content Security Policy directive 'script-src&apos ...

javascriptgoogle-chromelinkedin-apilinkedin-jsapi

What could be causing my dropdown links to malfunction on the desktop version?

I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...

javascripthtmlcss

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

javascriptjqueryhtmlrandomaudio-player

leaflet.js - Place a marker when clicked and update its position while dragging

Currently working on a small project that requires the ability to place a marker on an image-map powered by leaflet.js, and update its position if it's dragged. I was using the code below for this functionality but keep getting an error 'marker n ...

javascriptjquerymapsmarkerleaflet

Tips for using jQuery to add several image source URLs to an array

My JavaScript code uses jQuery to collect all image sources on document load and store them in an array: var sliderImg = []; sliderImg.push($('.thumbnail').children('img').attr('src')); Then, I have a click event set up to a ...

javascriptjqueryarrays

Changing the ng-include and ng-controller dynamically in your AngularJS project

I'm working on a section of my webpage that features multiple tabs, each requiring a partial and controller to function properly. My goal is to dynamically switch the ng-include and ng-controller based on the currently selected tab. One challenge I&a ...

javascriptangularjsmodel-view-controllerangularjs-ng-include

The iframe on my WordPress website is not displaying at its full size as intended

Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly. Using padd ...

javascripthtmlcsswordpressiframe

The error of "No 'Access-Control-Allow-Origin' header is present on the requested resource" persists even after implementing the Access-Control-Allow-Origin header

I'm trying to retrieve JSON data from a Firebase cloud function. The JSON URL works fine on the browser and my Android app, but I encounter issues when trying to fetch it in my JavaScript code. This results in an error message: No 'Access-Cont ...

javascriptjsonnode.jsfirebasegoogle-cloud-functions

Tips for integrating google's api.js file into my vue application

Currently, I am in the process of integrating Google Calendar into my Vue project. The steps I am following can be found at this link. Additionally, I came across an example code snippet at this URL. This is how my Vue file looks: <template> <d ...

javascriptvue.jsgoogle-calendar-api

Design an interactive vertical divider using d3

I am interested in developing a vertical rule similar to the one demonstrated at that updates its value dynamically based on the user's mouse movement. The example provided uses cubism.js, however, I would like to achieve the same functionality usin ...

javascriptjqueryd3.js

Transferring a JSON array from Google App Engine to Cloud Storage using GO

I am attempting to upload a JSON array to Google Cloud Storage, which is posted by an App Engine application using the code below: saveData : function saveData() { var _this = this, save = this.shadowRoot.querySelector('#save-data'), ...

javascriptjsongoogle-app-enginegogoogle-cloud-storage

Difficulties with Grid Layout in React Material Design UI

I've been working on a project and I'm using the Material UI Grid Component to create a specific layout, but no matter what I do, I just can't seem to get it right. The layout I'm aiming for in my Dialog looks like this: https://i.sst ...

javascriptreactjsmaterial-ui

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

javascripthtmlcssbutton

Implementing dynamic width with ng-style in AngularJS

I am trying to dynamically resize a div when an event is fired from S3. In the code below, I pass the progress variable to the updateProgress function as a parameter. This function resides in the top scope of my Angular controller. s3.upload(params).on(& ...

javascriptcssangularjs

The art of sweet redirection with Sweetalert2

I am working on a PHP page where users can input a number in a text field. If the entered number exceeds their available credit, I need to display an error message. Upon clicking the submit button to send the form, the user is directed to makeTransfer.php ...

javascriptphpsweetalertsweetalert2

"Utilizing Ajax for Form Validation in Zend Framework 2 - Is it

After following a tutorial, I encountered an issue with my code. The tutorial I followed can be found at the following link: I need help resolving the problem in my code. When I submit the form, the function to validate and save the data is being called ...

javascriptphpajaxzend-framework2

Issue with formatting and hexadecimal encoding in JavaScript

I am currently developing a LoRaWAN encoder using JavaScript. The data field received looks like this: {“header”: 6,“sunrise”: -30,“sunset”: 30,“lat”: 65.500226,“long”: 24.833547} My task is to encode this data into a hex message. Bel ...

javascriptjsonhexencodelorawan