摘要:本篇jQuery教程探讨了以视频作为网页背景的jQuery 插件,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
浏览器支持
现代浏览器全部支持
IE9+
下载
直接下载
github 地址:https://github.com/VodkaBears/Vide
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();
本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号