HTML5全屏背景视频jQuery插件
来源:互联网 发布:重生之网络娱乐小说 编辑:程序博客网 时间:2024/05/04 16:53
vidbg是一款基于HTML5的全屏背景视频jQuery插件。通过该jQuery插件可以在容器中插入视频,也可以将视频作为页面的全屏背景。该视频插件使用简单,兼容IE9以上的浏览器。它的特点还有:
支持所有的现代网页浏览器。
兼容IE9+浏览器。
视频会在桌面设备和笔记本电脑上播放,在移动设备(平板和手机等)上会回退为显示视频的封面。
使用方法
使用Vmc Slider需要引入jQuery和vidbg.min.js。
1
<script type=
"text/javascript"
src=
"jquery.min.js"
></script>
2
<script type=
"text/javascript"
src=
"vidbg.min.js"
></script>
初始化插件
该HTML5全屏背景视频插件有两种初始化方法:通过HTML标签和是用Javascript来初始化。
通过HTML标签初始化:
1
<div
class
=
"vidbg-box"
style=
"width: 650px; height: 338px;"
2
data-vidbg-bg="mp4: http:
//example.com/video.mp4,
3
webm: path/to/video.webm,
4
poster: path/to/poster.jpg"
5
data-vidbg-options=
"loop: true, muted: true, overlay: true"
>
6
</div>
通过Javascript来初始化:
1
$(
'.vidbg-box'
).vidbg({
2
'mp4'
:
'http://example.com/video.mp4'
,
3
'webm'
:
'path/to/video.webm'
,
4
'poster'
:
'path/to/fallback-image.png'
,
5
}, {
6
// 参数选项
7
});
注意要为视频文件提供.webm和.mp4两种格式,使其适应各种浏览器的需要。
全屏视频只需要将选择器设置为body元素即可。
配置参数
1
{
2
volume: 1,
3
playbackRate: 1,
4
muted: true,
5
loop: true,
6
position:
'50% 50%'
,
7
resizing: true,
8
overlay: false,
9
}
当resizing参数设置为true时,视频会随着浏览器窗口的缩放而缩放。
设置overlay为true时,会为视频添加一个轻微的模糊遮罩
0 1
- HTML5全屏背景视频jQuery插件
- Html5添加全屏背景视频jQuery插件教程
- 帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
- jquery html5视频播放插件在iframe中无法全屏解决办法
- jquery html5视频播放插件在iframe中无法全屏解决办法
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
- jquery全屏插件
- jquery全屏插件
- Jquery 全屏滚动插件
- 【jQuery插件】-----全屏插件fullpage
- html5背景视频使用总结
- HTML5 音频,视频,插件
- 使用视频作为背景,全屏展示
- jQuery全屏插件Textarea Fullscreen
- jQuery----全屏滚动插件fullPage
- jquery 网页全屏显示插件
- Android webview全屏播放HTML5中的视频
- WebView播放html5视频和全屏。
- 我的代码风格规范(动态更新)
- JavaScript学习(4.6):关系表达式
- swift开发笔记16 - 使用xib自定义一个控件(复合控件)
- map.entry简介
- redis配置文件样例(二)
- HTML5全屏背景视频jQuery插件
- Linux启动过程详解
- 如何下载谷歌地球高程并导出等高线为DXF文件
- 向DataGridView控件添加数据 .
- Android 三种播放视频的方式
- JavaScript学习(4.7):逻辑表达式
- 组态软件实现RFID设备数据采集
- 关于ReentrantLock的一些个人总结
- 一、python字典之(1)按值查询键