当前位置：首页 > 网页特效 > 图像/媒体

移动友好的HTML5全屏背景视频特效插件

分类：图像/媒体日期：2024-05-14 点击(8) 评论(0)

简介

##### 简要教程
Vidage.js是一款移动友好的HTML5全屏背景视频特效插件。Vidage.js可以在手机或小屏幕设备（34em）上暂停和隐藏视频，并显示指定的图片。
#####  安装
可以通过bower或npm来安装该视频插件。
```html
bower install vidage --save
npm install vidage --save  
```                
#####  使用方法
在页面中引入Vidage.min.js文件。

```html
<script type="text/javascript" src="js/Vidage.min.js"></script> 
```              
##### HTML结构 
使用下面的代码作为页面的全屏视频背景的HTML代码。

```html
<div class="Vidage">
    <div class="Vidage__image"></div>
 
    <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
        <source src="videos/bg.webm" type="video/webm">
        <source src="videos/bg.mp4" type="video/mp4">
    </video>
 
    <div class="Vidage__backdrop"></div>
</div>   
```              
 初始化插件
通过new Vidage()来实例化一个Vidage对象。

```html
<script>
    new Vidage(selector [, helperClass ]);
</script>
```             
如果使用的是ES6，方法如下：

```html
import Vidage from './Vidage';

new Vidage(selector [, helperClass ]);    ```  
Vidage.js插件的github主页地址为：https://github.com/dvLden/Vidage