vue.js：具有自托管（本地）视频文件的英雄背景视频

Question

创建hero background videoin的正确方法是什么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 ...>起作用。