页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

以视频作为网页背景的jQuery插件Vide

其他特效 HTML我帮您 3月前  次浏览

一个简单的以视频作为网页背景的jQuery插件Vide,支持全部现代浏览器

以视频作为网页背景的jQuery插件Vide

浏览器支持

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

  • Bower 安装
bower install vide 

使用

1、引入文件

依赖 jQuery

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

2、准备视频

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

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

3、使用

添加一个 data-vide-bg 的属性用来引入视频

data-vide-options 属性是配置文件(配置项后面会介绍)

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

你也可以设置扩展路径

<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> 

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

$('#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'); 

4、配置

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

{
  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、方法列表

// 获取插件实例
var instance = $('#yourElement').data('vide');

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

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

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

相关链接

发表评论