Vidage.js是一款移动友好的HTML5全屏背景视频特效插件。Vidage.js可以在手机或小屏幕设备（34em）上暂停和隐藏视频，并显示指定的图片。

安装

可以通过bower或npm来安装该视频插件。

bower install vidage --save
npm install vidage --save                  
                

使用方法

在页面中引入Vidage.min.js文件。

<script type="text/javascript" src="js/Vidage.min.js"></script>               
                

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对象。

<script>
    new Vidage(selector [, helperClass ]);
</script>             
                

如果使用的是ES6，方法如下：

import Vidage from './Vidage';

new Vidage(selector [, helperClass ]);      
                

Vidage.js插件的github主页地址为：https://github.com/dvLden/Vidage

在线预览    源码下载