Vue - 添加背景动画

Question

我正在尝试向我的网页添加一些背景 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 所以我想我做错了一些基本的事情

Answer 1

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

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

Answer 2

尝试：

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

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

Vue - 添加背景动画

Vue - Adding background animation

html

javascript

vue.js

vuejs2