当前位置：首页 > 网页特效 > 背景

html5视频背景插件vidbacking

分类：背景日期：2024-05-14 点击(5) 评论(0)

简介

在页面中引入jquery和jquery.vidbacking.js，以及jquery.vidbacking.css文件。

```html
<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类。

```html
<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元素内即可。

```html
<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>
    
    <h1>Vidbacking Demo of <div> Background</h1>
</div>      
```            
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过vidbacking()方法来初始化该HTML5视频背景插件。
```html
/* 全屏HTML5视频背景 */

web299.com

html5视频背景插件vidbacking

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果