Video not loading with VueJS - laravel

Question

I am working with Vue.js 2 and Laravel and have been trying to load a video from a local folder of my project without success.
Vue-loader plugin is correctly installed and added in my webpack.config.js as specified on the docs: https://vue-loader.vuejs.org/guide/#manual-setup
I have tried the most simple way.
<template>
<div>
<video autoplay muted loop id="myVideo">
<source src="/storage/videos/landing.mp4" type="video/mp4" />
</video>
</div>
</template>
I have also tried with a different approach as suggested on another stackoverflow question by dinamically updating the src attribute when the component is mounted.
<template>
<div>
<video ref="videoRef" src="" autoplay muted loop id="myVideo"></video>
</div>
</template>
<script>
export default {
mounted: function() {
this.$refs.videoRef.src =
"/storage/videos/landing.mp4";
}
};
</script>
None of those have worked tho.
Im quite sure the problem lies in Vue not resolving the video route properly since I have tried to use a dummy video link from the web and it is working absolutely fine.
Firefox is also giving me some clues.
However, Im not sure about what the problem is or how to solve it. Thanks in advance.
PS: I have triple checked the route specified and it definitely exists in my project.

Answer 1

Either you load your video with an es module import, your loader has to be able to import mp4, and you put that in the src
import video from 'path/to/video/a.mp4'
and in your component you do
<video :src="video">
PS make sure that the imported video is then defined in your data function.
Or you can use it like your doing with src="path/to/folder" and try to understand where that path is pointing at through your network tab, and put the video in the right folder based on that.