Createpluginsdirectory and addvideo-bg.client.tsfile with following: Note:You can use other filename but.clientis obligatory for client side render, cause you don't have the window at SSR. import{defineNuxtPlugin}from'#app'import{videoBackgroundPlugin}from'@hintay/vue-video-background'exportdef...
Prerequisites: Vue 2.x.x or Vue 3.x.x Installation in 2 Steps 1: Add with npm 💻 #For Vue 2.x.xnpm install vue-responsive-video-background-player@1.3.1#For Vue 3.x.xnpm install vue-responsive-video-background-player 2a: Install as a component ...
background-size: 50% 20%; // 填充所属元素的宽50% 高20%的区域,图片出现变形 background-size: 100px 100px; // 设置固定尺寸的背景图片
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...
vue-video-background.js Inside this file use the following: import Vue from 'vue' import VideoBackground from 'vue-responsive-video-background-player' Vue.component('video-background', VideoBackground) Then at your nuxt.config.js locate the part where you declare your plugins and import ...
vue-video-background 是一个 Vue 组件,用于在网页中实现登录界面的背景视频效果。通过引入 vue-video-background 组件,你可以轻松地将一个视频作为登录界面的背景,并且可以自定义视频的播放设置和样式。 使用vue-video-background,你可以指定要显示的视频文件,并设置视频的播放属性,比如是否循环播放、是否静音等。
Vue-responsive-video-background-player是一个vue组件,可以让你在网页的背景中播放自己的视频。它支持响应式设计,能够自适应不同分辨率的设备。这意味着无论用户使用的是台式机、笔记本电脑还是移动设备,视频都能够以最佳的质量进行播放。 该组件提供了多种设置选项,包括视频源、播放模式、自动播放和静音等。你可以...
Vue.component('video-background', VideoBackground); 2. Create a video background in the template. <video-background src="bg.mp4" poster="poster.jpg" :sources="[ {src: '900>.mp4', res: 900, autoplay: true}, {src: '640.mp4', res: 638, autoplay: true, poster: 'mobile-poster.pn...
I just tried src="https://github.com/avidofood/vue-responsive-video-background-player/blob/master/demo/public/videos/roadster-loop-imperial.mp4?raw=true" and got similar problem. Nothing is shown. If I do like you prescribe, download the file and then use :src="require(@/assets/video/roa...
component('video-bg', VideoBg) // or new Vue({ el: 'body', components: { VideoBg } }) <video-bg :sources="['demo/assets/video.mp4']" img="demo/assets/bg.jpg"> <!-- If you want to add content here, a slot is waiting! --> </video-bg> License VideoBackground is ...