简单到爆的视频背景效果Jquery插件-Vide

2分钟实现流行的背景视频特效

现在很多APP官网都开始用视频作为背景,看起来各种高端大气上档次。

录个视频很简单,但要把背景视频播放细节做好却不太容易。

Vide把这件事变得不能再简单了。先来看看它的效果:

vide.gif

不错吧 :) 

要做成这样,只需要bower install 一下:

bower install vide

然后引用JS

<script src="js/jquery.vide.min.js"></script>

将素材按以下目录结构放置

path/
├── to/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

最后在要引用的Dom元素上添加data-vide-bg属性即可:

<div style="width: 1000px; height: 500px;"
    data-vide-bg="path/to/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

当然你也可以直接用JS触发:

$("#myBlock1").vide("path/to/video");
$("#myBlock2").vide("path/to/video", {
...options...
});

一切就OK了。赶紧收藏起来吧,下次你的老板让你搞个NB的首页时,拿出来帅呆他。

本文由 Easy 发表于GET

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入