issue, use video background player in nuxt.js

[plategea]

hi,my code is plugins/vue-video-background.js

import Vue from 'vue' import VideoBackground from 'vue-responsive-video-background-player' Vue.component('video-background', VideoBackground);

and nuxt.config.js plugins: [ { src: '~/plugins/vue-video-background', ssr: false } ], but notworking ! my error code index.common.js?cf1a:3565 Uncaught TypeError: Object(...) is not a function at Module.fb15 (index.common.js?cf1a:3565) at webpack_require__ (index.common.js?cf1a:21) at eval (index.common.js?cf1a:85) at eval (index.common.js?cf1a:88) at Object../node_modules/vue-responsive-video-background-player/dist/index.common.js (app.js:425) at webpack_require (runtime.js:854) at fn (runtime.js:151) at eval (vue-video-background.js?abe3:1) at Module../plugins/vue-video-background.js (app.js:521) at webpack_require__ (runtime.js:854)

[itsAnuga]

Try following the instructions: https://github.com/avidofood/vue-responsive-video-background-player#3-only-for-nuxtjs-users

Remove the plugins/vue-video-background.js file and only include it in the nuxt.config.js file, as a plugin.

[robin6505]

Hi, I have the same issue. Also using nuxt.

I have done the following. npm install npm install vue-responsive-video-background-player

added this to the nuxt.config.js plugins: [ { src: '~/plugins/vue-video-background', ssr: false } ]

Can I skip step 2 for nuxt?

I get the following error during build

ERROR Plugin not found: ...\plugins\vue-video-background 22:37:53

at node_modules\@nuxt\builder\dist\builder.js:6066:15 at async Promise.all (index 2) at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:5631:5) at async Object._buildDev (node_modules\@nuxt\cli\dist\cli-dev.js:106:5) at async Object.startDev (node_modules\@nuxt\cli\dist\cli-dev.js:64:7) at async Object.run (node_modules\@nuxt\cli\dist\cli-dev.js:51:5) at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:2803:7)

What am I missing?

[sortidocorps]

Hi,

Nuxtjs works with vuejs 2, install : For Vue 2.x.x : npm install vue-responsive-video-background-player@1.2.2

I run it on typescript with decorator, but on js I think is the same

Put this in a file on plugins folder ` import { Plugin } from 'vue-responsive-video-background-player'

Vue.use(Plugin);`

Add this to the nuxt.config.js plugins section

And declare the component on your component like this `import VideoBackground from 'vue-responsive-video-background-player'

@Component({ components: { VideoBackground } })`

On template `<VideoBackground src="/......mp4" style="max-height: 400px; height: 100vh"

Hello welcome!

`

Put your video on static folder for nuxtjs also, not in assets.

And it's works fine for me.

[pmochine]

thanks @sortidocorps @itsAnuga for replying for me (I appreciate it)

@plategea and @robin6505 did you resolve your issue?

[robin6505]

Hi guys, thanks for your response.

I havent been able to get it to work yet. Trying to adjust the answer of @sortidocorps to js.

I have done the following: npm install vue-responsive-video-background-player@1.2.2

in plugins folder, created a file (vue-video-background.js)

import Vue from 'vue'
import { Plugin } from 'vue-responsive-video-background-player'

Vue.use(Plugin);

added this to nuxt.config.js

  plugins: [
    {
      src: '~/plugins/vue-video-background.js',
      ssr: false
    }
  ],

created a component called Hero.vue

<template>
    <VideoBackground src="/static/video/banner-video.mp4" style="max-height: 400px; height: 100vh" > <h1 style="color: white">Hello welcome!</h1> </VideoBackground>
</template>

<script>
import VideoBackground from 'vue-responsive-video-background-player'

export default {
  name: 'Hero',
  components: {
    VideoBackground
  }
}

</script>

Currently I get the following error. When I go the the webpage

node_modules\vue-responsive-video-background-player\dist\index.common.jsopen in editor
  return styleElement
}

function addStyle (obj /* StyleObjectPart */) {
  var update, remove
  var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')

  if (styleElement) {
    if (isProduction) {
      // has SSR styles and in production mode.
      // simply do nothing.

Compilation is successful

[robin6505]

I have finally resolved the issue.

(I'm using Nuxt)

there were multiple things I did wrong:

1. Put the files in subfolders under assets. (assets/images and assets/videos). Now I put the files directly in assets.
2. Not using require to load files
3. Forgetting the colon before src.

The file structure is now the following: Hero.vue (which is loaded in index.vue)

<template>
 <video-background 
    :src="require('~/assets/banner-video.mp4')"
    :poster="require('~/assets/cover-image.jpg')"
    style="max-height: 400px; height: 100vh;"
>
    <h1 style="color: black;">Hallo welcome!</h1>
</video-background>

</template>

plugins/vue-video-background.js

import Vue from 'vue'
import VideoBackground from 'vue-responsive-video-background-player'

Vue.component('video-background', VideoBackground);

in nuxt.config.js add:

plugins: [
    {
      src: '~/plugins/vue-video-background.js',
      mode: 'client'
    }
  ],