Fork me on GitHub

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Vide 视频背景jQuery插件

一个简单的以视频作为网页背景的jQuery 插件

浏览器支持

  • 现代浏览器全部支持
  • IE9+

效果演示地址

下载

1
bower install vide

使用

1、引入文件

依赖 jQuery

1
<script src='js/jquery.vide.min.js'></script>

2、准备视频

准备视频格式可以是 .webm / .mp4 等浏览器支持的视频格式，最好多准备一张静态的图片。

1
2
3
4
5
6
path/
├── src/
│   ├── video.mp4
│   ├── video.ogv
│   ├── video.webm
│   └── video.jpg

3、使用

添加一个 data-vide-bg 的属性用来引入视频
data-vide-options 属性是配置文件（配置项后面会介绍）

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

你也可以设置扩展路径

1
2
<div style="width: 1000px; height: 500px;"data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster" data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
</div>

下面是一段可以帮助我们调试的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#myBlock').vide('path/to/video');
$('#myBlock').vide('path/to/video', {
	//options
});
$('#myBlock').vide({
	mp4: path/to/video1,
	webm: path/to/video2,
	ogv: path/to/video3,
	poster: path/to/poster
}, {
	//options
});
$('#myBlock').vide('extended path as a string', 'options as a string');

http请求默认的方法为get,所以就像你看到的,下面的这个例子也是可用的:

1
2
3
request('/search', function(res){

});

4、配置

下面是所有的配置项和初始化值

1
2
3
4
5
6
7
8
9
10
11
12
{
	volume: 1,
	playbackRate: 1,
	muted: true,
	loop: true,
	autoplay: true,
	position: '50% 50%', // 类似于CSS的背景位置属性
	posterType: 'detect', // 静态图片类型 "detect" — 自动检测; "none" — 没有静态图; "jpg", "png", "gif",... - 扩展类型
	resizing: true, // 自动改变大小, read: https://github.com/VodkaBears/Vide#resizing
	bgColor: 'transparent', // 背景颜色,
	className: '' // 给Vide的div添加class
}

5、方法列表

1
2
3
4
5
6
7
8
9
10
11
12
// 获取插件实例
var instance = $('#yourElement').data('vide');

// 获取视频元素的背景颜色
instance.getVideoObject();

// 调整视频背景大小
// 随着窗口改变自动调整大小
instance.resize();

// 销毁插件
instance.destroy();

结尾

github 地址：https://github.com/VodkaBears/Vide