当前位置：首页 > 技术博客 > JQuery > jQuery html5背景视频插件

jQuery html5背景视频插件

3年前 (2023-02-17)JQuery940

vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景

使用方法

在页面中引入jquery和jquery.vidbacking.js，以及必须的css样式，如果项目已存在jquery就不需要再次引入了。

<script src="https://cdn.liuzhixi.cn/zb_system/script/jquery-2.2.4.min.js"></script>
<script src="https://cdn.liuzhixi.cn/resources/script/jquery.vidbacking.js"></script>
<style>
.vidbacking-active-body-back{
	position: fixed;
	z-index: -100;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	background-size: cover;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}

.vidbacking-active-block-back{
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	width: auto;
	z-index: -100;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.vidbacking{
	display: none;
}

.vidmask-block-back{
	background: url(https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEe5R.img) repeat;
	opacity: 1;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: auto;
	z-index: -50;
	display: block;
}
</style>

HTML结构

对于全屏的视频背景，你需要在<body>开始标签之后添加HTML5 video标签，在video标签中需要添加vidbacking class类。

<video poster="/background.jpg" autoplay muted loop class="vidbacking">
  <source src="/video.mp4" type="video/mp4">
  <source src="/video.webm" type="video/webm">
</video>

对于在<div>或其他元素内制作视频背景效果，你只需要将video标签放在其中元素内即可。

<div id="video-back">
  <video poster="/background.jpg" autoplay muted loop class="vidbacking">
    <source src="/video.mp4" type="video/mp4">
    <source src="/video.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

完整演示案例

<!DOCTYPE html>    
<html lang="zh">    
<head>    
	<meta charset="UTF-8">    
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>html5视频背景插件vidbacking</title>    
	<style>
	.clearfix{display:block;clear:both;float:none;}
        body{display:block;margin:0;padding:0;font-family:'Roboto', sans-serif;}

        .video-back{display:block;padding:200px 0px 0px 0px;text-align:center;}
        .video-back h1{display:block;text-align:center;color:#fff;font-size:50px;}
        .video-back p{display:block;color:#fff;margin:0px;padding:0px;margin-bottom:20px;}
        .video-back img{width:150px;}
        
        .vidbacking-active-body-back{
	position: fixed;
	z-index: -100;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	background-size: cover;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}

.vidbacking-active-block-back{
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	width: auto;
	z-index: -100;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.vidbacking{
	display: none;
}

        </style>
</head>    
<body>    
	<div class="container">    
		<video poster="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEe5S.img" autoplay muted loop class="vidbacking">    
		<source src="https://prod-streaming-video-msn-com.akamaized.net/6e85cce0-b2fe-4c75-afca-d81ae0eed0bd/26df1714-e852-4644-93c6-a0ebf69c8bf7.mp4" type="video/mp4">    
		</video>    
		<div class="video-back">    
		<h1>html5视频背景插件vidbacking</h1>    
		<p>Run video on full background using jquery.vidbacking.js</p>    
		 
		<div class="clearfix"></div>    
		</div>    
	</div>    
	<script src="/zb_system/script/jquery-2.2.4.min.js"></script>    
	<script src="/resources/script/jquery.vidbacking.js" type="text/javascript"></script>    
        <script type="text/javascript">    
        $(function(){    
        $('body').vidbacking({    
        'masked': true    
        });    
        });    
        </script>    
</body>    
</html>