时间戳

首页 > 解决方案 > Vue - 添加背景动画

javascript - Vue - 添加背景动画

问题描述

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

标签： javascripthtmlvue.js

解决方案

尝试 ：

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

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

推荐阅读