使用方法
在页面中引入jquery和jquery.vidbacking.js，以及jquery.vidbacking.css文件。
<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类。
<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>元素内即可。
<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视频背景插件。
/* 全屏HTML5视频背景 */
<script type="text/javascript">
$(function(){
$('body').vidbacking();
});
</script>/* DIV元素内的HTML5视频背景 */
<script type="text/javascript">
$(function(){
$('#video-back').vidbacking();
});
</script>[1].vidbacking插件：http://www.mzwu.com/pic/201910/jquery.vidbacking.zip
评论（0）
暂无评论。