用视频做背景很酷:一个视频背景的vue插件:video-jumbo

in vue.js前端webpack with 0 comment

快速导航:解决方案直接看第三个标题

keywords: 我写了一个 npm 插件

作为一个快把 React 忘光的前端,写了不知道多久的 Vue 组件,虽然经常会分享一些经验给我的前端伙伴,但是也真的没有想过写一个公共组件解决更多人的问题。
我也不知道为什么,最近就写了一个。

background: 支付宝、keep官网第一屏

这两个网站第一屏都使用了视频做背景,并且在上面有一些文案、slogan 之类的内容。觉得很酷,可以尝试做一次。
于是我就在自己的项目里尝试了这样的设计。伙伴们的反馈是效果很好。于是我就多花了点时间整理。
类似的效果可以参考 www.heelysfly.com
参考效果

使用 video-jumbo 插件快速制作首屏视频

首先在你的 vue/nuxt 项目里安装插件

$ npm install video-jumbo

然后在你的 main.js(vue) 里引入并且使用它,在 nuxt 里,要在 plugin 文件夹新建一个插件,并且在 nuxt.config.js 里注册。

// main.js, 省略部分代码
import VideoJumbo from 'video-jumbo';
Vue.use(VideoJumbo)

接着在页面上,就可以使用你的组件了
组件中间还可以继续插入 dom 结构的代码,将会显示在播放按钮的上面

<video-jumbo :data="{object}">
  <div class="class-name">视频中间部分的 dom 结构</div>
  <div class="class-name">视频中间部分的 dom 结构</div>
</video-jumbo>

你需要在 :data 这里传一个对象,这个对象里包含两个视频的地址,一个是作为背景静音播放的视频,一个是点击播放按钮点击以后弹出的窗口播放的视频。两个视频可以使用 cdn 上的链接地址,也可以是保存在项目本地通过 require 引入。

{
  backgroundVideoUrl: '',
  popupVideoUrl: '',
}

Features

由于时间关系,会在后续版本中继续添加的功能(当前版本:1.0.13)

npm & github

npm 包地址: https://www.npmjs.com/package/video-jumbo
github 仓库地址:https://github.com/mitkimi/video-jumbo

Comments are closed.