vue.js: hero background video with self hosting (local) video file

Question

What is the right way to create a hero background video in vue.js ?

The following way doesn't work.

html:

<template>
    <div id="hero">
        <video playsinline autoplay muted loop poster="../assets/img/hero-1.jpg" id="bgvideo" width="1080" height="720">
            <source :src="videoUrl" :type="videoType">
        </video>
    </div>

</template>

javascript:

<script>
export default {
    name: 'SectionHome',
    data() {
        return {
            videoUrl: '@/assets/videos/hero-1.mp4',
            videoType: 'video/mp4'
        }
    },
};
</script>

I also tried to pass the file path directly to the html tag: <source src="@/assets/video.mp4" type="video/mp4"> , but according to this issue this way doesn't work at all. By the way I have the same problem with vuetify <v-img ...> , passing local files doesn't work, whereby <img ...> does work.

Answer 1

To solve passing local files in Vuetify you just need to add require to your src

From Vuetify :

Vue loader converts relative paths into require functions automatically for you. Unfortunately, this is not the case when it comes to custom components . You can circumvent this issue by using require. If you're using Vuetify as a Vue-CLI 3 plugin, you can edit your project's vue.config.js file by modifying the options for vue-loader.

Incorrect <v-img src="../path/to/img" />

Correct <v-img :src="require('../path/to/img')" />

You can also do the same with <source :src="require('@/path/to/video')">

<video playsinline autoplay muted loop poster='@/assets/img/hero-1.jpg'>
    <source :src='require("@/assets/videos/hero-1.mp4")' type='video/mp4'>
</video>