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

在

vue.js

中创建英雄背景视频的正确方法是什么

以下方法不起作用

html:

javascript:

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

导出默认值{
名称：'SectionHome'，
数据（）{
返回{
videoUrl:“@/assets/videos/hero-1.mp4”，
视频类型：“视频/mp4”
}
},
};

---

我还尝试将文件路径直接传递到html标记：

，但按照这种方法根本不起作用。顺便说一下，我对vuetify也有同样的问题，传递本地文件不起作用，

确实起作用。

要解决在vuetify中传递本地文件的问题，只需将

require

添加到

src

从Vuetify：

Vue loader会自动将相对路径转换为所需函数。不幸的是，对于自定义组件，情况并非如此。您可以通过使用require来避免这个问题。如果将Vuetify用作Vue CLI 3插件，则可以通过修改Vue loader的选项来编辑项目的Vue.config.js文件

不正确

正确的

您也可以使用

您是否尝试过

传递本地文件？我想您也可以尝试

传递本地文件。您是否能够解决您的问题？我很想知道任何想知道的人：这是有效的@DjSh如果你写一个我很乐意回答的答案，

确实有效

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

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