vue.js: фоновое видео героя с собственным (локальным) видеофайлом

Question

Как правильно создать hero background video в vue.js?

Следующий способ не работает.

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>

Я также пытался передать путь к файлу непосредственно в тег html: <source src="@/assets/video.mp4" type="video/mp4">, но, согласно , эта проблема не работает вообще.Кстати, у меня такая же проблема с vuetify <v-img ...>, передача локальных файлов не работает, в результате чего <img ...> работает.

Answer 1

Чтобы решить передачу локальных файлов в Vuetify, вам просто нужно добавить require к вашему src

Из Vuetify:

Vue loader автоматически преобразует относительные пути в требуемые функции. К сожалению, это не тот случай, когда речь идет о пользовательских компонентах . Вы можете обойти эту проблему, используя require. Если вы используете Vuetify в качестве плагина Vue-CLI 3, вы можете редактировать файл vue.config.js вашего проекта, изменив параметры vue-loader.

Некорректное <v-img src="../path/to/img" />

Корректное <v-img :src="require('../path/to/img')" />

Вы также можете сделать то же самое с <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>