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,autoplay: 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全部内容。

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