Vue.js:带有自托管(本地)视频文件的英雄背景视频

Question

在vue.js中创建hero background video的正确方法是什么？

以下方法不起作用。

.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 加载器会自动将相对路径转换为 require 函数。不幸的是，当涉及到自定义组件时，情况并非如此。您可以使用 require 来规避此问题。如果你使用 Vuetify 作为 Vue-CLI 3 插件，你可以通过修改 vue-loader 的选项来编辑项目的 vue.config.js 文件。

不對 <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>