vide

vide 介绍

非常简单的视频背景 jQuery 插件

浏览器 支持

现代浏览器全部 支持 IE9+

使用

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 width: 1000px; height: 500px;"data-vide-bg="path/src/video" data-vide-options="loop: false,muted: false,position: 0% 0%"></div>你也可以设置扩展路径<div 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,position: 0% 0%"></div>下面是一段可以帮助我们调试的 代码 $('#myBlock').vide('path/to/video');$('#myBlock').vide('path/to/video',{...options...});$('#myBlock').vide({mp4: path/to/video1,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,a utop lay: true,position: '50% 50%',// 类似于css的背景位置 属性 posterType: 'detect',// 静态 图片 类型 "detect" — 自动 检测; "none" — 没有静态图; "jpg","png","gif",... - 扩展类型resizing: true,// 自动 改变大小,read: https://github.com/VodkaBears/Vide#resizingbgColor: 'transparent',// 背景颜色,className: '' // 给Vide的div 添加 class} 5、 方法 列表 // 获取 插件 实例var instance = $('#yourElement').data('vide');// 获取 视频元素的背景颜色instance.getVideoObject();// 调整视频背景大小// 随着窗口改变 自动 调整大小instance.resize();// 销毁 插件 instance.destroy(); 链接 : http://www.fly63.com/nav/1521

网站地址 : http://vodkabears.github.io/vide/

GitHub: https://github.com/vodkabears/Vide

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

vide官方网站

官方网站： http://vodkabears.github.io/vide/

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于vide的详细内容...