在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/