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">，但是根据this issue，这种方式根本行不通。顺便说一下，我对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>

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

1 个答案: