Vue - 添加背景动画答案

【问题标题】：Vue - Adding background animationVue - 添加背景动画
【发布时间】：2021-09-19 06:34:53
【问题描述】：

我正在尝试向我的网页添加一些背景 mp4/gif 动画，但由于某种原因它无法正常工作 - 它只显示一些黑色占位符（似乎是）动画。

这是我尝试使用的库：https://github.com/pespantelis/vue-videobg

按照说明完成后，我得到了这个（仅显示相关部分）：

main.js 文件：

// eslint-disable-next-line import/extensions
import VideoBg from 'vue-videobg';

Vue.component('video-bg', VideoBg);

Comp.Vue 组件文件：

<template>
  <div>
    <v-container fluid class="primary">
      <v-row>
        <v-col>
          <video-bg :sources="['../assets/witchcraft-magic.mp4']"
                    img="../assets/vast.png">
          </video-bg>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

顺便说一句，我在尝试使用其他库时也发生了同样的结果 - 例如 https://github.com/avidofood/vue-responsive-video-background-player 所以我想我做错了一些基本的事情

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

试试：

:sources="[require('@/assets/witchcraft-magic.mp4')]"

:img="require('@/assets/img/vast.png')"

【讨论】：

它给了我各种 eslint 错误
对不起，我忘记了引号，请立即尝试
我已将poster更改为img，现在显示了png文件，但没有显示动画
原来缺少的只是用[ 和] <video-bg :sources="[require('@/assets/witchcraft-magic.mp4')]"> 包裹它
好伙伴，我会为其他人更新答案，干杯:)

【解决方案2】：

有时..在路径中不起作用。尝试给出完整的路径，如

<video-bg :sources="['<project-name>/assets/witchcraft-magic.mp4']"
                img="<project-name>/assets/vast.png">
      </video-bg>

【讨论】：

很遗憾，它的效果并不好