转载

HTML5全屏背景视频jQuery插件

简要教程

vidbg是一款基于HTML5的全屏背景视频jQuery插件。通过该jQuery插件可以在容器中插入视频，也可以将视频作为页面的全屏背景。该视频插件使用简单，兼容IE9以上的浏览器。它的特点还有：

支持所有的现代网页浏览器。

兼容IE9+浏览器。

视频会在桌面设备和笔记本电脑上播放，在移动设备(平板和手机等)上会回退为显示视频的封面。

HTML5全屏背景视频jQuery插件

查看演示 下载插件

使用方法

使用Vmc Slider需要引入jQuery和vidbg.min.js。

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="vidbg.min.js"></script>

初始化插件

该HTML5全屏背景视频插件有两种初始化方法：通过HTML标签和是用Javascript来初始化。

通过HTML标签初始化：

<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时，会为视频添加一个轻微的模糊遮罩

来源 jQuery之家

正文到此结束

所属分类：编程技术

本文标签： ip HTML5 db 移动设备笔记本电脑 web IDE http java UI src jquery example 配置参数插件 js HTML
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

HTML5全屏背景视频jQuery插件

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流