插件描述：vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
Video Background Plugin
vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
使用方法
在页面中引入jquery和jquery.vidbacking.js，以及jquery.vidbacking.css文件。
1 2 3 | <link rel="stylesheet" href="path/to/jquery.vidbacking.css" /><script src="path/to/jquery.min.js"></script><script src="path/to/jquery.vidbacking.js"></script> |
HTML结构
你可以在某个<div>或<section>元素上制作HTML5视频背景效果。也可以制作全屏的HTML5视频背景效果。对于全屏的视频背景，你需要在body标签之后添加HTML5 video标签，在video标签中需要添加vidbacking class类。
1 2 3 4 | <video poster="screenshot1.jpg" autoplay muted loop class="vidbacking"> <source src="video1.mp4" type="video/mp4"> <source src="video1.webm" type="video/webm"></video> |
对于在<div>元素内制作视频背景效果，你只需要将video标签放在<div>元素内即可。
1 2 3 4 5 6 7 8 | <div id="video-back"> <video poster="screenshot1.jpg" autoplay muted loop class="vidbacking"> <source src="video1.mp4" type="video/mp4"> <source src="video1.webm" type="video/webm"> </video> <!-- html content of the div --> <h1>Vidbacking Demo of <div> Background</h1></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过vidbacking()方法来初始化该HTML5视频背景插件。
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* 全屏HTML5视频背景 */<script type="text/javascript"> $(function(){ $('body').vidbacking(); });</script> /* DIV元素内的HTML5视频背景 */<script type="text/javascript"> $(function(){ $('#video-back').vidbacking(); });</script |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： template.js模板引擎
- 下一个特效： jqueryAlert弹框插件（pcwap）