音频/视频
HTML5全屏背景视频jQuery插件
PetitQ
vidbg 是一款基于 HTML5 的全屏背景视频 jQuery 插件。通过该 jQuery 插件可以在容器中插入视频，也可以将视频作为页面的全屏背景。该视频插件使用简单，兼容 IE9 以上的浏览器。
使用方法：
使用 Vmc Slider 需要引入 jQuery 和 vidbg.min.js。
也想出现在这里？联系我们吧
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="vidbg.min.js"></script>
HTML 部分：
该 HTML5 全屏背景视频插件有两种初始化方法：通过 HTML 标签和是用 Javascript 来初始化。
<div class="vidbg-box" style="width: 650px; height: 338px;"
data-vidbg-bg="mp4: http://example.com/video.mp4,
webm: path/to/video.webm,poster: path/to/poster.jpg"data-vidbg-options="loop: true, muted: true, overlay: true">
</div>
Javascript 初始化：
$('.vidbg-box').vidbg({
'mp4': 'http://example.com/video.mp4',
'webm': 'path/to/video.webm',
'poster': 'path/to/fallback-image.png',
}, {
// 参数选项});
注意要为视频文件提供.webm 和.mp4 两种格式，使其适应各种浏览器的需要。全屏视频只需要将选择器设置为 body 元素即可。
配置参数：
{volume: 1,
playbackRate: 1,
muted: true,
loop: true,
position: '50% 50%',
resizing: true,
overlay: false,
}
当 resizing 参数设置为 true 时，视频会随着浏览器窗口的缩放而缩放。设置 overlay 为 true 时，会为视频添加一个轻微的模糊遮罩。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
