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 ...>起作用。

最佳答案

要解决在vuetify中传递本地文件的问题,只需将require添加到src
来自Vuetify:
Vue加载程序自动将相对路径转换为所需函数。不幸的是,当涉及到定制组件时,情况并非如此。您可以使用require来规避此问题。如果将vuetify用作vue cli 3插件,则可以通过修改vue加载程序的选项来编辑项目的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>

关于javascript - vue.js:具有自托管(本地)视频文件的英雄背景视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55476909/

10-12 12:39
查看更多